Maison >interface Web >tutoriel CSS >Plusieurs méthodes pour obtenir un effet d'animation de préchargement en CSS3
Plusieurs méthodes pour obtenir un effet d'animation de préchargement en CSS3
- 不言original
- 2018-06-20 11:29:382339parcourir
Cet article présente principalement l'animation CSS3 : 5 exemples d'effets d'animation de préchargement. Le contenu est assez bon. Je vais le partager avec vous maintenant et le donner comme référence.
Obtenez l'effet d'animation comme indiqué sur l'image :
Préchargez l'animation 1 : double cercle tournant
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.
La mise en œuvre est telle que montrée 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écharger Animation 2 : Cercles décalés
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);}
}
Animation de préchargement quatre : cercle de saut
Il s'agit d'un effet d'animation de motif de vague mexicaine. régler le paramètre 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
One This L'effet de rayonnement radar peut être obtenu en définissant le même effet de fondu d'entrée et de sortie pour trois éléments de travée, puis en retardant chacun légèrement.
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;}
}
Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, s'il vous plaît. faites attention au site Web PHP chinois !
Recommandations associées :
Analyse sur l'utilisation de l'attribut Animation en CSS3
Comment utiliser CSS3 pour dessiner une animation de cercle de chargement
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!