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的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
CSS3实现红包抖动效果
Dec 23 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 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
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
javascript事件问题
2009/09/05 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript中 ES6 generator数据类型详解
2016/08/11 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python 变量类型详解
2018/10/10 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python实现大量图片重命名
2020/03/23 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
Delphi笔试题
2016/11/14 面试题
成品仓管员工作职责
2013/12/29 职场文书
单位单身证明范本
2014/01/11 职场文书
装配出错检讨书
2014/09/23 职场文书
暑假打工感想
2015/08/07 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android