爱心跳动效果 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 ...
随机推荐
- Android通过Web与后台数据库交互
2021.1.27 更新 已更新新版本博客,更新内容与原文章相比有点多,因此新开了一篇博客,请戳这里. 1 背景 开发一个App与后台数据库交互,基于MySQL+原生JDBC+Tomcat,没有使用D ...
- 浅谈在c#中使用Zlib压缩与解压的方法
作者:Compasslg 介绍 近期用c#开发一个游戏的存档编辑工具需要用 Zlib 标准的 Deflate 算法对数据进行解压. 在 StackOverflow 上逛了一圈,发现 c# 比较常用到的 ...
- 软件调研——GoodNotes 5与Notability
项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任健) 这个作业的要求在哪里 作业要求 我在这个课程的目标是 积累软件开发经验,提高工程能力 这个作业在哪个具体方面帮助我实现目标 深入调 ...
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- IDAPython类库---idc.py的源码
#!/usr/bin/env python #--------------------------------------------------------------------- # IDAPy ...
- 通过 Netty、ZooKeeper 手撸一个 RPC 服务
说明 项目链接 微服务框架都包括什么? 如何实现 RPC 远程调用? 开源 RPC 框架 限定语言 跨语言 RPC 框架 本地 Docker 搭建 ZooKeeper 下载镜像 启动容器 查看容器日志 ...
- (邹博ML)数学分析与概率论
机器学习入门 深度学习和机器学习? 深度学习在某种意义上可以认为是机器学习的一个分支,只是这个分支非常全面且重要,以至于可以单独作为一门学科来进行研究. 回忆知识 求解S. 对数函数的上升速度 我们使 ...
- layui处理表单/按钮进行多次提交
在一个项目中,我们最频繁的操作是CRUD,所以一定有涉及到按钮的操作.比如:确认保存,确认编辑,确认删除等等.所以,为了避免表单进行多次提交就显得特别地重要. 代码实现 知识点 $(':button' ...
- 10-10-12分页机制(xp)
虚拟地址到物理地址 虚拟地址空间就是32位系统的那4GB,这4GB空间的地址称为虚拟地址.虚拟地址经过分段机制后转化为线性地址,一般虚拟地址都等于线性地址,因为大多数段寄存器的基地址都为0,只有FS段 ...
- 迷失在Mysql的锁世界~
1.饮料 这是一杯饮料. 这是3杯饮料,每杯饮料的味道各不相同. 但是人类并不称呼[饮料]为[饮料],而是称呼[饮料]为[记录]. 2.红章鱼 这个红色的,长的像章鱼的家伙,我们就叫它红章鱼~ 红章鱼 ...