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

高洛峰 原创: 2017-03-06 11:08:46 1687浏览

效果图如下

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中文网！

css 波纹动画 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：css为什么要清除浮动(float)？清除浮动的原理是什么下一条：菜单栏 “三” 变形为“X”css3过渡动画详解