爱心跳动效果 CSS实现
爱心跳动效果 CSS实现
实现效果
砰砰砰
实现原理
通过动画改变每个元素的高度，从而实现每个元素高度变化的效果，为了使每个元素依次跳动，给每个元素添加一定的延时效果，使得从效果元素依次跳动
代码分析
核心动画
一共写了5个动画，但是实现的东西都是差不多的，只是改变的高度不同，这是其中的一个动画
改变元素的高度，并且上移一段距离，这个距离就是画爱心的关键，如果没有这个移动距离，元素始终保持着下端对齐，不会摆出爱心的效果，所以这个可以根据自己的实际高度来调定。
@keyframes jump1 {
30%,50% {
height: 60px;
transform: translateY(-30px);
}
70%,100% {
height: 20px;
transform: translateY(0px);
}
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心跳动效果</title>
<style>
* {
margin: 0;
padding: 0;
}
.loveBox {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: rgb(36, 40, 66);
}
.loveLine {
height: 200px;
}
.loveLine li {
float: left;
list-style: none;
width: 20px;
height: 20px;
border-radius: 10px;
margin-right: 10px;
}
.loveLine li:nth-child(1) {
background-color: red;
animation: jump1 3s infinite;
}
.loveLine li:nth-child(2) {
background-color: rgb(238, 118, 5);
animation: jump2 3s 0.2s infinite;
}
.loveLine li:nth-child(3) {
background-color: rgb(106, 10, 233);
animation: jump3 3s 0.4s infinite;
}
.loveLine li:nth-child(4) {
background-color: darkmagenta;
animation: jump4 3s 0.6s infinite;
}
.loveLine li:nth-child(5) {
background-color: rgb(245, 11, 147);
animation: jump5 3s 0.8s infinite;
}
.loveLine li:nth-child(6) {
background-color: rgb(32, 9, 231);
animation: jump4 3s 1.0s infinite;
}
.loveLine li:nth-child(7) {
background-color: rgb(36, 170, 81);
animation: jump3 3s 1.2s infinite;
}
.loveLine li:nth-child(8) {
background-color: #f62e74;
animation: jump2 3s 1.4s infinite;
}
.loveLine li:nth-child(9) {
background-color: red;
animation: jump1 3s 1.6s infinite;
}
@keyframes jump1 {
30%,
50% {
height: 60px;
transform: translateY(-30px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump2 {
30%,
50% {
height: 120px;
transform: translateY(-60px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump3 {
30%,
50% {
height: 160px;
transform: translateY(-75px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump4 {
30%,
50% {
height: 180px;
transform: translateY(-60px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
@keyframes jump5 {
30%,
50% {
height: 200px;
transform: translateY(-45px);
}
70%,
100% {
height: 20px;
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="loveBox">
<ul class="loveLine">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
感觉最近的文章内容都是很简单的东西，之后挑战一些有难度的东西吧！
更多阅读
充电水波摇晃效果
旋转水滴加载效果
抖音超火的罗盘时钟效果
圆盘时钟效果
文字抖动效果
旋转魔方效果
文字闪烁效果
加载动画效果
炫彩流光按钮
原生js轮播图效果
文字折叠效果
爱心跳动效果 CSS实现的更多相关文章
- ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo(转)
转载自:http://blog.csdn.net/mad2man/article/details/16898369 分类: cocoa SDK2013-11-23 11:52 388人阅读 评论(0) ...
- ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo
demo功能:基于CAEmitterLayer的雪花,烟花,火焰,爱心等效果. demo说明:基于Core Animation的粒子发射系统,粒子用CAEmitterCell来初始化. 粒子画在背景层 ...
- HTML5+CSS3制作无限滚动与文字跳动效果
㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...
- 超出区域文字显示为省略号或者剪切效果——CSS的生僻操作
每门语言总有那么一些不太常用,却又不可或缺的语法操作.下面说一下,在HTML文件中,如何设置用 "省略号" 和 "剪切" 代替大量文字的效果. 以下是HTML的 ...
- 前端页面loading效果(CSS实现)
当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...
- ie8兼容半透明效果css
1.opacity:0.5;(半透明效果在ie9及以上版本适用,ie8及以下不兼容) 解决办法:在css中加入filter: progid:DXImageTransform.Microsoft.Alp ...
- 哇塞！HTML5 实现的雨滴效果 CSS发抖
http://dreamsky.github.io/main/blog/rainy-day/ Rainy Day – 哇塞! HTML5 实现的雨滴效果 http://www.webhek.com/m ...
- ##常用效果css##
1 绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块.元素被设置成,absolute,原有的位置会被占用,设为 relative原位置 ...
- 毛玻璃效果 css
毛玻璃效果 <style> .container{ width: 287px; height: 285px; background-image: url(img/background.pn ...
随机推荐
- fiddler 手机抓包（含https） 完整流程
第一部分:下载并安装fiddler 一.使用任一浏览器搜索[fiddler下载安装],并下载fiddler 安装包. 二.fiddler安装包下载成功后,将下载的fiddler压缩包解压到自定义文件夹 ...
- C++ sort（）函数使用简介
Sort函数简介 sort()函数是C++的一个排序函数,可以对传入参数给定的区间的所有元素进行排序,默认是升序,也可以是降序,如果需要其他排序规则需要自行编写compare()函数作为参数. ...
- Linux 文件系统和目录结构
1. Linux 文件系统 2. linux 目录结构 3. 磁盘分区.文件系统和目录的关系 1. Linux 文件系统 Linux 支持多种的文件系统种类,除了 linux 通常使用的 ext 系列 ...
- k8s 创建私有docker仓库 登陆授权令牌的Secret
参考https://kubernetes.io/zh/docs/tasks/configure-pod-container/pull-image-private-registry/ Kubernete ...
- 数据结构(5):Java实现二叉树
二叉树图: package com.test.Sort; import java.util.ArrayList; import java.util.LinkedList; public class B ...
- 1053 Path of Equal Weight
Given a non-empty tree with root R, and with weight Wi assigned to each tree node Ti. The weig ...
- Known Notation 39届亚洲赛牡丹江站K题
题意: 题意,哎!说道题意就蛋疼啊,比赛的时候就愣是把这个题目读成数字可以随意组合,比如123 可以拆成1 23 ,12 3 ,1 2 3,结果显然,水题当神题,各种想不出来,然后就显然的 ...
- Linux下性能监控、守护进程与计划任务管理
目录 一:监视系统进程(ps .top) 二:查看网络连接信息 (netstat) 三:文件进程.端口关联(lsof) 四:计划任务管理(at .crontab) at crontab 一:监视系统进 ...
- DVWA之Brute Force(暴力破解)
目录 Low Medium High Impossible 暴力破解是指使用穷举法,举出所有的可能的结果,然后逐一验证是否正确! Low 源代码: <?php if( isset( $_GET[ ...
- Mac下配置Git 的全局忽略文件
$ git config --global core.excludesfile ~/.gitignore_global $ vim ~/.gitignore_global #配置文件参考如下 # fo ...