Maison > Article > interface Web > Utilisez du CSS pur pour obtenir un effet d'animation de chargement simple (exemple de code)
Cet article utilise des exemples de code pour présenter comment utiliser du CSS pur pour obtenir un effet d'animation de chargement simple. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
[Tutoriel recommandé : Tutoriel vidéo CSS]
J'ai vu que de nombreux sites Web utilisent actuellement des images gif pour leurs effets de chargement, donc Je suis curieux, comment puis-je y parvenir en utilisant uniquement CSS ? De bonnes choses arrivent, s'il vous plaît, récupérez-les.
Facteur de difficulté
☆☆☆☆
Rendu
Idée
Le CSS est utilisé pour modifier le HTML, donc même les effets les plus simples dépendent du HTML, et la mise en œuvre de la mise en page HTML de cet exemple est encore plus importante.
Analysons d'abord la composition de l'effet d'animation :
Pour résumer, nous utilisons les étapes suivantes pour percer le mystère de l'effet de chargement étape par étape :
(1) Utilisez HTML pour implémenter les mêmes lignes réparties le long d'un certain point, elles forment un cercle
(2) Dessinez un petit cercle, ajoutez une couleur de fond et recouvrez-le jusqu'au centre de la ligne
(3) Ajoutez une animation dégradée pour changer la transparence de la ligne
(4) Faites bouger les lignes en définissant différents délais d'animation pour différentes lignes
HTML
<div id="container"> <div class="load-line rotate-0"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-30"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-60"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-90"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-120"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-150"> <span class="left"></span> <span class="right"></span> </div> <div id="circle-center"></div> </div>
Analyse :
CSS
#container, #circle-center { background: grey; } #container { position: relative; width: 600px; height: 300px; } #circle-center { position: absolute; top: 100px; left: 250px; width: 100px; height: 100px; border-radius: 100px; } .load-line { position: absolute; top: 150px; left: 200px; width: 200px; height: 13px; } .load-line > span { display: inline-block; width: 50%; height: 100%; border-radius: 20px; background: white; } .left { float: left; } .right { float: right; } .rotate-0 { transform: rotate(0); } .rotate-0 > .left { animation: load-effect 1.2s linear 0s infinite; } .rotate-0 > .right { animation: load-effect 1.2s linear 0.6s infinite; } .rotate-30 { transform: rotate(30deg); } .rotate-30 > .left { animation: load-effect 1.2s linear 0.1s infinite; } .rotate-30 > .right { animation: load-effect 1.2s linear 0.7s infinite; } .rotate-60 { transform: rotate(60deg); } .rotate-60 > .left { animation: load-effect 1.2s linear 0.2s infinite; } .rotate-60 > .right { animation: load-effect 1.2s linear 0.8s infinite; } .rotate-90 { transform: rotate(90deg); } .rotate-90 > .left { animation: load-effect 1.2s linear 0.3s infinite; } .rotate-90 > .right { animation: load-effect 1.2s linear 0.9s infinite; } .rotate-120 { transform: rotate(120deg); } .rotate-120 > .left { animation: load-effect 1.2s linear 0.4s infinite; } .rotate-120 > .right { animation: load-effect 1.2s linear 1.0s infinite; } .rotate-150 { transform: rotate(150deg); } .rotate-150 > .left { animation: load-effect 1.2s linear 0.5s infinite; } .rotate-150 > .right { animation: load-effect 1.2s linear 1.1s infinite; } @keyframes load-effect { 0% { opacity: 0; } 100% { opacity: 1; } }Analyse :
Vidéo de programmation ! !
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!