Home >Web Front-end >CSS Tutorial >CSS3 animation (1): 5 preload animation effects
CSS3 animation (1): 5 preload animation effects
- 高洛峰Original
- 2017-02-17 13:21:012015browse
Achieve the animation effect as shown in the picture:
Preload animation 1: Double rotating circle
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 circles
Two circles move back and forth horizontally. 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, achieved by setting the delay parameters between different circles.
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 radar radiation effect, set the same fade in and fade out effect for 3 span elements , and then each can be achieved with a slight delay.
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;}}
More CSS3 animations (1): 5 preload animation effects For related articles, please pay attention to the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS3 detailed explanation: transformNext article：CSS3 detailed explanation: transform