平常喜爱逛各种网站的专题讲座版块，或是商品公布网页页面，由于能看到许多酷炫的网页页面实际效果。这一实例的素材图片来源于于百度搜索访问器的公布网页页面，及其下一个例例“掉色龙动漫”全是来源于于百度搜索访问器，尽管我是Google访问器的忠诚客户，可是不可不用说中国互连网制造行业著名知名品牌网站的专题讲座页、商品公布页全是卯足了劲的让网页页面看上去很帅炫。
这一实例重要点取决于圆球跳跃的节奏感感和合理布局精准定位。
一、实例专业知识点
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://www.jb51.net" target="_blank">www.jb51.net</a></p>
</footer>
</body>
</html>
之上便是CSS3 完成跳跃的圆球动漫的详尽內容，大量有关CSS3 完成延展性圆球动漫的材料请关心脚本制作之家其他有关文章内容！