CSS3 realizes bouncing ball animation
|
I usually like to visit the special pages or product release pages of major websites because I can see a lot of cool page effects. The material for this case comes from the release page of Baidu Browser, and the next case "Chameleon Animation" also comes from Baidu Browser. Although I am a loyal user of Google Chrome, I have to say that the special pages and product release pages of well-known brand websites in the domestic Internet industry have all tried their best to make the pages look cool. The key point of this case lies in the rhythm of the ball's bouncing and the layout positioning.
1. Case Knowledge Points 1. Relative and absolute positioning 2. Multiple animation queues 2. Main code 1. HTML code
<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 part of the code
#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);
}}For animations in multiple queues, pay attention to the animation delay. The animation of the next queue will be executed only after the animation of the previous queue is completed. Complete page code
<!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>Animation of balls falling in sequence</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
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>123WORDPRESS.COM</p>
<p><a href="https://www.jb51.net" target="_blank">www.jb51.net</a></p>
</footer>
</body>
</html>
The above is the details of how to implement bouncing ball animation with CSS3. For more information about how to implement elastic ball animation with CSS3, please pay attention to other related articles on 123WORDPRESS.COM! |
<<: Add a floating prompt for the header icon in the ElementUI table
>>: Detailed explanation of various usages of proxy_pass in nginx
Recommend
Detailed explanation of the background-position percentage principle
When I was helping someone adjust the code today,...
Detailed explanation of the example of exporting data from a specified table in MySQL
Detailed explanation of MySQL exporting data from...
HTML commonly used meta encyclopedia (recommended)
The Meta tag is an auxiliary tag in the head area...
Detailed explanation of concat related functions in MySQL
1. concat() function Function: Concatenate multip...
In-depth explanation of closure in JavaScript
Introduction Closure is a very powerful feature i...
Method of building docker private warehouse based on Harbor
Table of contents 1. Introduction to Harbor 1. Ha...
How to get the intersection/difference/union of two sets in mysql
Common scenarios of MySQL: getting the intersecti...
What are the advantages of MySQL MGR?
MGR (MySQL Group Replication) is a new feature ad...
Implementation of form submission in html
Form submission code 1. Source code analysis <...
How to solve the Docker container startup failure
Question: After the computer restarts, the mysql ...
Super detailed basic JavaScript syntax rules
Table of contents 01 JavaScript (abbreviated as: ...
MySQL trigger principle and usage example analysis
This article uses examples to explain the princip...
How to add configuration options to Discuz! Forum
Discuz! Forum has many configuration options in th...
A brief discussion on MySQL event planning tasks
1. Check whether event is enabled show variables ...
JavaScript to achieve simple provincial and municipal linkage
This article shares the specific code for JavaScr...