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;

À 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;
    }
  }

  Copier après la connexion
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>