Quelles sont les animations de chargement ?
Jul 24, 2017 am 10:20 AMAvant de commencer, passons en revue quelques connaissances : la nouvelle animation d'images clés de CSS3 peut être utilisée pour implémenter de nombreuses animations. Nous pouvons utiliser animation-delay pour contrôler l'exécution retardée des animations afin d'obtenir des effets riches.
Lorsque la valeur de animation-delay est positive, l'animation sera retardée par rapport à l'état initial
Lorsque la valeur de animation-delay est négative, l'animation sera avancée ; Démarrez l'exécution à partir de l'état correspondant à cette valeur (la valeur absolue d'un nombre négatif).
(L'image de l'effet peut ne pas être claire, veuillez comprendre)
Le premier effet
Il y a 16 petits carrés au total. Positionnez-les et modifiez la transparence des carrés à travers des images clés
{animation: ball 2s 0s ease infinite;} @keyframes ball { 0%{ opacity: 1; } 50%{ opacity: 1; } 51%{ opacity: 0; } }
2. Le deuxième effet
{animation: turn_atom 1.5s 0s ease infinite;} @keyframes turn_atom { 0%{ height:25px; width: 25px; top: 0; left: 0; } 50%{ height: 20px; width: 20px; top: 60px; left: 60px; } 51%{ height: 15px; width: 15px; top: 60px; left: 60px; } 100%{ height: 20px; width: 20px; top: 0; left: 0; } }
{animation: turn_atomZ 1.5s 0s ease infinite;} @keyframes turn_atomZ { 0%{ z-index: 6; } 50%{ z-index: 6; } 51%{ z-index: 4; } }
3. Le troisième effet
{animation: light 1.5s 0s ease infinite;} @keyframes light { 50%{ opacity: 0.4; height: 15px; width: 15px; } }
4. Le quatrième effet
{animation: r_ball 2s 0s ease infinite,r_ballZ 2s 0s ease infinite;} @keyframes r_ball { 50%{ left: 100%; } } @keyframes r_ballZ { 25%{ transform: scale(0.5); } 50%{ transform: scale(1); } }
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment introduire des images dans vue

Quelle est la fonction de la balise span
