CSS zum Erstellen einer Ripple-Animation-CSS-Tutorial-php.cn

CSS zum Erstellen einer Ripple-Animation

php中世界最好的语言

Freigeben： 2018-03-22 10:04:43

Original

2715 Leute haben es durchsucht

Dieses Mal werde ich Ihnen CSS zum Erstellen von Ripple-Animationen vorstellen. Was sind die Vorsichtsmaßnahmen für die Erstellung von CSS zum Erstellen von Ripple-Animationen?

Das Rendering ist wie folgt

Der Beispielcode ist wie folgt

<!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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS bietet mehrere Möglichkeiten, ein dreispaltiges Layout zu implementieren

CSS- und Sass-Entwicklungsspezifikationen

CSS, um das Symbol rotieren zu lassen, wenn die Maus nach oben bewegt

Das obige ist der detaillierte Inhalt vonCSS zum Erstellen einer Ripple-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!