css做出波纹动画-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

css做出波纹动画

Mar 22, 2018 am 10:04 AM

css animasi

这次给大家带来css做出波纹动画，css做出波纹动画的注意事项有哪些，下面就是实战案例，一起来看一下。

效果图如下

实例代码如下

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;style&gt;
   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);
    }
   }
  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;p class=&quot;box&quot;&gt;
   &lt;a class=&quot;vr&quot; href=&quot;http://vr.nibaoo.cn/01/&quot;&gt;&lt;/a&gt;
   &lt;p class=&quot;vr_wrap&quot;&gt;&lt;/p&gt;
   &lt;p class=&quot;vr_wrap2&quot;&gt;&lt;/p&gt;
  &lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！