This article mainly introduces CSS3 animation: 5 examples of preload animation effects. The content is quite good. I will share it with you now and give it as a reference.
Achieve the animation effect as shown in the picture:
Preload animation one: double rotation
A circle rotating in two different directions. We define a CSS code for the speed of the inner ring, that is, the speed of the inner ring is 2 times faster than that of the outer ring.
The implementation is shown in the figure:
html code:
<body style="background: #ffb83c;">
<p id="preloader-1">
<span></span>
<span></span>
</p>
</body>css code:
#preloader-1{
position: relative;
}
#preloader-1 span{
position: absolute;
border:8px solid #fff;
border-top:8px solid transparent;
border-radius: 999px;
}
#preloader-1 span:nth-child(1){
width:80px;
height: 80px;
animation: spin-1 2s infinite linear;
}
#preloader-1 span:nth-child(2){
top:20px;
left:20px;
width:40px;
height: 40px;
animation: spin-2 1s infinite linear;
}
@keyframes spin-1{
0%{transform: rotate(360deg); opacity: 1.0;}
50%{transform: rotate(180deg); opacity: 0.5;}
100%{transform: rotate(0deg);opacity: 0;}
}
@keyframes spin-2{
0%{transform: rotate(0deg); opacity: 0.5;}
50%{transform: rotate(180deg); opacity: 1;}
100%{transform: rotate(360deg);opacity: 0.5;}
}Preload animation two: staggered circle
two The circles move back and forth side by side. Each circle has its own reverse movement animation parameters set.
Effect:
html code:
<body style="background: #4ad3b4;">
<p id="preloader-2">
<span></span>
<span></span>
</p>
</body>css code ：
#preloader-2{
position: relative;
}
#preloader-2 span{
position: absolute;
width:30px;
height: 30px;
background: #fff;
border-radius: 999px;
}
#preloader-2 span:nth-child(1){
animation: cross-1 1.5s infinite linear;
}
#preloader-2 span:nth-child(2){
animation: cross-2 1.5s infinite linear;
}
@keyframes cross-1{
0%{transform: translateX(0); opacity: 0.5;}
50%{transform: translateX(80px); opacity: 1;}
100%{transform: translateX(0);opacity: 0.5;}
}
@keyframes cross-2{
0%{transform: translateX(80px); opacity: 0.5;}
50%{transform: translateX(0); opacity: 1;}
100%{transform: translateX(80px);opacity: 0.5;}
}Preload animation three: rotating circle
Effect:
html code:
<body style="background: #ab69d9;">
<p id="preloader-3">
<span></span>
</p>
</body>css code:
#preloader-3{
position: relative;
width:80px;
height: 80px;
border:4px solid rgba(255,255,255,.25);
border-radius: 999px;
}
#preloader-3 span{
position: absolute;
width:80px;
height:80px;
border:4px solid transparent;
border-top:4px solid #fff;
border-radius: 999px;
top:-4px;
left:-4px;
animation: rotate 1s infinite linear;
}
@keyframes rotate{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
Preload animation four: jumping circle
This is a Mexican wave pattern animation effect, by setting the delay between different circles Parameters to achieve.
Effect:
html code:
<body style="background: #c1d64a;">
<p id="preloader-4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</body>css code ：
#preloader-4{
position: relative;
}
#preloader-4 span{
position:absolute;
width:16px;
height: 16px;
border-radius: 999px;
background: #fff;
animation: bounce 1s infinite linear;
}
#preloader-4 span:nth-child(1){
left:0;
animation-delay: 0s;
}
#preloader-4 span:nth-child(2){
left:20px;
animation-delay: 0.25s;
}
#preloader-4 span:nth-child(3){
left:40px;
animation-delay: 0.5s;
}
#preloader-4 span:nth-child(4){
left:60px;
animation-delay: 0.75s;
}
#preloader-4 span:nth-child(5){
left:80px;
animation-delay: 1.0s;
}
@keyframes bounce{
0%{transform: translateY(0px);opacity: 0.5;}
50%{transform: translateY(-30px);opacity: 1.0;}
100%{transform: translateY(0px);opacity: 0.5;}
}Preload animation five: Radar circle
A kind of radar radiation effect , set the same fade-in and fade-out effect for three span elements, and then delay each one slightly to achieve it.
Effect:
html code:
<body style="background: #f9553f;">
<p id="preloader-5">
<span></span>
<span></span>
<span></span>
</p>
</body>css code ：
#preloader-5{
position: relative;
}
#preloader-5 span{
position:absolute;
width:50px;
height: 50px;
border:5px solid #fff;
border-radius: 999px;
opacity: 0;
animation: radar 2s infinite linear;
}
#preloader-5 span:nth-child(1){
animation-delay: 0s;
}
#preloader-5 span:nth-child(2){
animation-delay: 0.66s;
}
#preloader-5 span:nth-child(3){
animation-delay: 1.33s;
}
@keyframes radar{
0%{transform: scale(0);opacity: 0;}
25%{transform: scale(0);opacity: 0.5;}
50%{transform: scale(1);opacity: 1.0;}
75%{transform: scale(1.5);opacity: 0.5;}
100%{transform: scale(2);opacity: 0;}
}The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Analysis on the usage of Animation animation property in CSS3
How to use css3 to draw a loading circle animation
The above is the detailed content of Several methods to achieve preload animation effect in CSS3. For more information, please follow other related articles on the PHP Chinese website!
css3 tutorial
What are the css3 gradient properties?
Introduction to the three core components of hadoop
How to use averageifs function
What are the software for learning python?
The difference and connection between java and javascript
Where can I get the Douyin Little Fire Man costume?
What are the java workflow engines?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
