CSS3 实现弹跳的小球动画


Posted in HTML / CSS onOctober 26, 2020

平时喜欢逛各大网站的专题版面,或者产品发布页面,因为可以看到很多炫酷的页面效果。这个案例的素材来自于百度浏览器的发布页面,以及下一个案例“变色龙动画”都是来自于百度浏览器,虽然我是谷歌浏览器的忠实用户,但是不得不说国内互联网行业知名品牌网站的专题页、产品发布页都是卯足了劲的让页面看起来很酷炫。

这个案例关键点在于小球弹跳的节奏感和布局定位。

CSS3 实现弹跳的小球动画

一、案例知识点

1、相对和绝对定位

2、多个animation动画列队

二、主体代码

1、HTML代码

<div id="wrap">
    <div class="tu1"><img src="images/1.png" /></div>
    <div class="tu2"><img src="images/2.png" /></div>
    <div class="tu3"><img src="images/3.png" /></div>
</div>

2、CSS部分代码

#wrap{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:580px;
	height:143px;
	margin:auto;
	}
#wrap img{
	width:160px;
	}
#wrap div{
	float:left;
	margin-right:50px;}
#wrap div:last-child{
	margin-right:0;}
.tu1,.tu2,.tu3{
	position:absolute;
	left:50%;
	margin-left:-80px;
	}
.tu1{
	z-index:1;
	animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,leftMove 0.4s ease-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite;
	}
.tu2{
	z-index:2;
	animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,middle 0.4s ease-out 1.2s 1 forwards;
	}
.tu3{
	z-index:3;
	animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,rightMove 0.4s ease-out 1.2s 1 forwards;
	}
@keyframes tiantiao1{
	0%{
		transform:translateY(-500px);
		}
	100%{
		transform:translateY(0);}
	}
@keyframes tiantiao2{
	0%{
		transform:translateY(0);}
	100%{
		transform:translateY(-100px);}}
@keyframes tiantiao3{
	0%{
		transform:translateY(-100px);}
	100%{
		transform:translateY(0);}}
@keyframes tiantiao4{
	0%{
		transform:translateY(0px);}
	100%{
		transform:translateY(-50px);}}
@keyframes tiantiao5{
	0%{
		transform:translateY(-50px);}
	100%{
		transform:translateY(0);}
		}
@keyframes leftMove{
	0%{
		transform:translateX(0);}
	100%{
		transform:translateX(-300px) scale(1.6);
		
		}}
@keyframes rightMove{
	0%{
		transform:translateX(0);}
	100%{
		transform:translateX(300px) scale(1.6);
		
		}}
@keyframes middle{
	0%{
		transform:translateX(0);
		}
	100%{
		transform:translateX(0) scale(1.6);
		
		}}

多个队列的动画要注意动画的延迟。上一个队列的动画执行完毕后才执行下一个队列的动画。

完整页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>小球掉落依次排列动画</title>
<style type="text/css">
body,div,footer,p{
	margin:0;
	padding:0;}
body{
	font:1em "microsoft Yahei";
	background-color:#eee;}
#wrap{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:580px;
	height:143px;
	margin:auto;
	}
#wrap img{
	width:160px;
	}
#wrap div{
	float:left;
	margin-right:50px;}
#wrap div:last-child{
	margin-right:0;}
.tu1,.tu2,.tu3{
	position:absolute;
	left:50%;
	margin-left:-80px;
	}
.tu1{
	z-index:1;
	animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,leftMove 0.4s ease-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite;
	}
.tu2{
	z-index:2;
	animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,middle 0.4s ease-out 1.2s 1 forwards;
	}
.tu3{
	z-index:3;
	animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,rightMove 0.4s ease-out 1.2s 1 forwards;}
footer{
	position:absolute;
	bottom:20px;
	left:50%;
	margin-left:-104px;
	}
footer p{
	text-align:center;
	margin-bottom:.7em;}
footer a{
	color:#666;
	text-decoration:none;}
footer a:hover{
	color:#333;}

@keyframes tiantiao1{
	0%{
		transform:translateY(-500px);
		}
	100%{
		transform:translateY(0);}
	}
@keyframes tiantiao2{
	0%{
		transform:translateY(0);}
	100%{
		transform:translateY(-100px);}}
@keyframes tiantiao3{
	0%{
		transform:translateY(-100px);}
	100%{
		transform:translateY(0);}}
@keyframes tiantiao4{
	0%{
		transform:translateY(0px);}
	100%{
		transform:translateY(-50px);}}
@keyframes tiantiao5{
	0%{
		transform:translateY(-50px);}
	100%{
		transform:translateY(0);}
		}
@keyframes leftMove{
	0%{
		transform:translateX(0);}
	100%{
		transform:translateX(-300px) scale(1.6);
		
		}}
@keyframes rightMove{
	0%{
		transform:translateX(0);}
	100%{
		transform:translateX(300px) scale(1.6);
		
		}}
@keyframes middle{
	0%{
		transform:translateX(0);
		}
	100%{
		transform:translateX(0) scale(1.6);
		
		}}

</style>
</head>

<body>
<div id="wrap">
	<div class="tu1"><img src="images/1.png" /></div>
    <div class="tu2"><img src="images/2.png" /></div>
    <div class="tu3"><img src="images/3.png" /></div>
</div>
<footer>
     <p>三水点靠木</p>
     <p><a href="https://3water.com" target="_blank">3water.com</a></p>
</footer>
</body>
</html>

以上就是CSS3 实现弹跳的小球动画的详细内容,更多关于CSS3 实现弹性小球动画的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3解决移动页面上点击链接触发色块的问题
Jun 03 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
HTML中meta标签及Keywords
Apr 15 HTML / CSS
HTML5 Blob对象的具体使用
May 22 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 #HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 #HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 #HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 #HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 #HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 #HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 #HTML / CSS
You might like
PHP中的表达式简述
2016/05/29 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
关于js datetime的那点事
2011/11/15 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python实现图像拼接
2020/03/05 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
工作中的自我评价如何写好
2013/10/28 职场文书
自主实习接收函
2014/01/13 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
公司员工体检通知
2015/04/21 职场文书
个人廉政承诺书
2015/04/28 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android