css波纹动画

代码：

 !DOCTYPE html  html  head  meta charset= UTF-8  title PHP  /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  div >
免费拿去研究吧！更多好的源码尽在PHP ，关注我们给你好看哦~
相关推荐：
jquery实现手势解锁源码
原生js实现可移动的提示div框源码
css实现会动的猫脸
以上就是css波纹动画的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。