css实现波纹动画效果实例详解-css教程-PHP中文网

css实现波纹动画效果实例详解

高洛峰

发布： 2017-03-06 11:08:46

原创

2188 人浏览过

效果图如下

css实现波纹动画效果实例详解

实例代码如下

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

登录后复制

更多css实现波纹动画效果实例详解相关文章请关注PHP中文网！