Vous apprendre étape par étape comment utiliser CSS3 pour obtenir des effets d'animation (partage de code)

Article précédent « H5 : Plusieurs façons d'implémenter une animation dans les pages ? (Code ci-joint) ", vous fait connaître plusieurs façons d'implémenter l'animation dans la page. L'article suivant vous présentera comment utiliser CSS3 pour obtenir un effet d'animation simple et magnifique. Regardons-le ensemble

Revoyez l'animation de CSS3. Je ne peux presque plus l'écrire. J'ai vraiment aimé Flash. cette fois-là, mais c'est dommage que les temps aient changé. Traitez simplement cet article comme un document

Prise en charge du navigateur

Internet Explorer 10, Firefox et Opera prennent en charge l'attribut d'animation.

Safari et Chrome prennent en charge l'attribut alternatif -webkit-animation.

Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge la propriété d'animation.

Définition et utilisation

la propriété animation est une propriété raccourcie permettant de définir six propriétés d'animation :

• animation-name

• animation-duration

• animation-timing-function animation-delay

• animation-iteration-count animation-direction

Syntaxe

animation: name duration timing-function delay iteration-count direction;

Valeur	Description	Remarques
animation-timing-function	Spécifie l'animation La courbe de vitesse	peut prendre la valeur linéaire , easy (fondu entrant et sortant), easy-in, easy-out, easy-in-out, cubique-bezier(n, n, n, n)
animation-play-state	Spécifie si l'animation est en cours d'exécution ou en pause.	paused signifie état en pause, running signifie état en cours d'exécution
animation-name	spécifie le nom de l'image clé qui doit être lié au sélecteur	@keyframe { de {opcity:0} à {opcity:1}}
animation-iteration-count	Spécifie le nombre de fois que l'animation doit être jouée	La valeur facultative est infinie (temps infinis) n (par exemple 5 fois)
animation-fill-mode	Animation avant ou après la lecture, si son effet d'animation est visible.	aucun (par défaut) / avant (une fois l'animation terminée) / arrière (avant l'affichage de l'animation) / les deux (les deux)
animation-duration	Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes	Doit être précisé sinon, l'animation ne sera pas exécutée
animation-direction	Spécifie si l'animation doit être jouée à l'envers à tour de rôle	La valeur par défaut est normale, alternative signifie que l'animation doit être joué à l'envers à tour de rôle. gauche et droite
animation-delay	Spécifie le délai avant le début de l'animation	Définit le temps d'attente avant le démarrage de l'animation, en secondes ou millisecondes. La valeur par défaut est 0. L'unité est s

À propos de la définition de l'image clé

• Firefox prend en charge les règles alternatives @-moz-keyframes
  

• Opera prend en charge les règles alternatives @-o-keyframes ;
  

Safari et Chrome prennent en charge les règles alternatives @-webkit-keyframes ;

• 
  

La valeur prend en charge 0-100 % et de, à.

• @keyframes move {
    0% {
      top: 0px;
      left: 0px;
    }
    25% {
      top: 200px;
      left: 200px;
    }
    50% {
      top: 100px;
      left: 100px;
    }
    75% {
      top: 200px;
      left: 200px;
    }
  
    100% {
      top: 0px;
      left: 0px;
    }
  }
  
  @keyframes move {
    from {
      top: 0px;
      left: 0px;
    }
    to {
      top: 0px;
      left: 100px;
    }
  }

démo J'ai écrit un exemple, la terre tourne autour du soleil

Ce qui suit est le code

<!-- html 部分 -->
<div style="width:700px; ">
  <div class="t">
    <div class="t1"></div>
  </div>
</div>

/* css 部分 */
@keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes t {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.t {
  height: 500px;
  width: 500px;
  position: relative;
  border-radius: 50%;
  transform: scale(.8);
  border: 1px solid #dedede;
  &::before {
    content: "";
    width: 50px;
    height: 50px;
    background: radial-gradient(72px, #f00, #ff0, #080);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0 0 37px #fcff4a;
  }
  .t1 {
    height: 20px;
    border-radius: 50%;
    width: 20px;
    margin-top: -10px;
    top: 50%;
    left: -10px;
    background: radial-gradient(26px, #0082ff, #184608, #003ade);
    position: absolute;
    animation: t 3s infinite linear;
    transform-origin: 260px center;
  }
}

</style>

Il y a aussi une démo, ici https://k-ui.cn

Recommander l'apprentissage

Vidéo CSS3 tutoriel

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!