Maison >interface Web >tutoriel CSS >Explication détaillée d'exemples d'utilisation de CSS pour implémenter des effets d'animation d'entraînement

Explication détaillée d'exemples d'utilisation de CSS pour implémenter des effets d'animation d'entraînement

高洛峰original: 2017-03-06 11:08:462252parcourir

Le rendu est le suivant

Explication détaillée dexemples dutilisation de CSS pour implémenter des effets danimation dentraînement

L'exemple de code est le suivant

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   body{
    background: #000;
   }
   .box{
    width: 100%;
    height: 600px;
    background: #000;
   }
   .vr {
    display: block;
    width: 71px;
    height: 71px;
    border-radius: 50%;
    position: absolute;
    left: 18px;
    top: 22px;
    background:#98FB98 url(../imges/new_img/vr.png) no-repeat left top;
    background-size: 100% 100%;
    z-index: 99;
   }
   
   .vr_wrap {
    background: #fff;
    opacity: 0.7;
    filter: alpha(opacity=70);
    width: 71px;
    height: 71px;
    border-radius: 50%;
    position: absolute;
    left: 18px;
    top: 22px;
    box-shadow: 0px 0px 50px 10px #fbfbfb;
    animation: mymove 2s infinite;
    /*animation-direction:alternate;*/
    border-radius: 50%;
   }
   
   .vr_wrap2 {
    background: #fff;
    opacity: 0.9;
    filter: alpha(opacity=90);
    border-radius: 50%;
    width: 71px;
    height: 71px;
    border-radius: 50%;
    position: absolute;
    left: 18px;
    top: 22px;
    box-shadow: 0px 0px 50px 10px #fbfbfb;
    animation: mymove1 2s infinite;
    /*animation-direction:alternate;*/
   }
   
   @keyframes mymove {
    0% {
     box-shadow: 0px 0px 0px 2px #fff;
     height: 71px;
     width: 71px;
    }
    100% {
     box-shadow: 0px 0px 0px 20px #fff;
     height: 72px;
     width: 72px;
    }
    100% {
     opacity: 0;
     filter: alpha(opacity=0);
    }
   }
   
   @keyframes mymove1 {
    0% {
     box-shadow: 0px 0px 0px 2px #fff;
     height: 71px;
     width: 71px;
    }
    50% {
     box-shadow: 0px 0px 0px 20px #fff;
     height: 72px;
     width: 72px;
     opacity: 0;
    }
    100% {
     opacity: 0;
     filter: alpha(opacity=0);
    }
   }
  </style>
 </head>

 <body>
  <p class="box">
   <a class="vr" href="http://vr.nibaoo.cn/01/"></a>
   <p class="vr_wrap"></p>
   <p class="vr_wrap2"></p>
  </p>
 </body>

</html>

Pour des exemples plus détaillés d'implémentation CSS d'effets d'animation d'entraînement, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Déclaration：

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 précédent：Pourquoi CSS doit-il effacer float ? Quel est le principe du dégagement des flotteurs ?Article suivant：Pourquoi CSS doit-il effacer float ? Quel est le principe du dégagement des flotteurs ?

Articles Liés

Voir plus