Maison interface Web tutoriel HTML Quelles sont les animations de chargement ?

Quelles sont les animations de chargement ?

Jul 24, 2017 am 10:20 AM
css

Avant 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;
      }
    }
Copier après la connexion
Pour chaque définir la valeur de retard d'animation pour un carré. Ici, mon temps d'animation global est de 2 s et divisé uniformément en 16 carrés est de 0,125 s, donc la valeur de retard d'animation que j'ai définie commence à -1,875 s et augmente avec une différence. de 0,125 à 0.

2. Le deuxième effet

La position de la grosse boule au milieu reste inchangée, et les trois sur le côté Les petites boules sont contenues respectivement dans trois carrés. Définissez la position de la petite boule {top:0;left:0;} et réglez le carré rotateZ pour qu'il pivote pour former cette intersection.

Définissez le processus d'animation via une animation par image clé (l'écriture de l'animation par image clé ci-dessous n'est pas la meilleure méthode) et définissez la valeur de retard d'animation pour chaque balle, de sorte que les trois balles puissent se déplacer à des moments différents. de l'avant.

{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;
      }
    }
Copier après la connexion
De plus, vous devez également définir la valeur de l'index z pour le conteneur parent des trois petites boules via une animation par image clé pour obtenir l'effet visuel de la rotation de la petite boule. autour de la grosse boule.

{animation: turn_atomZ 1.5s 0s ease infinite;}
@keyframes turn_atomZ {
      0%{
        z-index: 6;
      }
      50%{
        z-index: 6;
      }
      51%{
        z-index: 4;
      }
    }
Copier après la connexion

3. Le troisième effet

Cet effet est relativement simple, il suffit de changer la taille et la transparence de la boule (la transparence ainsi que la largeur et la hauteur de la boule sont initialement définies).

{animation: light 1.5s 0s ease infinite;}
@keyframes light {
      50%{
        opacity: 0.4;
        height: 15px;
        width: 15px;
      }
    }
Copier après la connexion

4. Le quatrième effet

Initialement, les quatre boules sont positionnées à la même position, et la valeur gauche de la boule et la taille de la boule peuvent être modifiées via des images clés.

{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);
      }
    }
Copier après la connexion

C'est tout pour l'instant, j'en ajouterai plus plus tard.

(À suivre)

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Comment envelopper l'invite dans js Comment envelopper l'invite dans js May 01, 2024 am 06:24 AM

Comment envelopper l'invite dans js

See all articles