Maison > Article > interface Web > L'animation CSS3 implémente 5 effets d'animation de préchargement
L'animation CSS3 implémente 5 effets d'animation de préchargement
- 高洛峰original
- 2017-03-22 14:51:512351parcourir
Obtenez l'effet d'animation comme indiqué sur l'image : 
Préchargez l'animation 1 : Double cercle rotatif
Un cercle tournant dans deux directions différentes. Nous définissons un code CSS pour la vitesse de la bague intérieure, c'est-à-dire que la vitesse de la bague intérieure est 2 fois plus rapide que celle de la bague extérieure.
L'implémentation est comme indiqué dans la figure : 
Code html :
<body style="background: #ffb83c;"> <p id="preloader-1"> <span></span> <span></span> </p> </body>
Code css :
#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;}
}
Préchargement de l'animation deux : échelonné cercle
Les deux cercles vont et viennent l'un sur l'autre. Chaque cercle possède son propre ensemble de paramètres d'animation de mouvement inverse.
Effet : 
code html :
<body style="background: #4ad3b4;"> <p id="preloader-2"> <span></span> <span></span> </p> </body>
code css :
#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;}
}
Précharger l'animation trois : cercle tournant
Effet : 
code html :
<body style="background: #ab69d9;"> <p id="preloader-3"> <span></span> </p> </body>
code css :
#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);}
}
Précharger l'animation quatre : cercle sautant
c'est un effet d'animation de motif de vagues mexicaines, obtenu en définissant les paramètres de retard entre différents cercles.
Effet : 
Code HTML :
<body style="background: #c1d64a;"> <p id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </p> </body>
Code CSS :
#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;}
}
Précharger l'animation cinq : cercle radar
Un effet de rayonnement radar, définissez le même effet de fondu d'entrée et de sortie pendant 3 span elementss, puis retardez légèrement chacun pour y parvenir.
Effet : 
code html :
<body style="background: #f9553f;"> <p id="preloader-5"> <span></span> <span></span> <span></span> </p> </body>
code css :
#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;}
}
Articles associés :
Comment utiliser HTML5 Canvas pour créer des effets d'animation 3D
Démonstration du code graphique de l'effet d'animation HTML5 Canvas
Analyse récapitulative de l'effet d'animation CSS3
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!