css做出波纹动画

2020-11-27 来源：星星旅游

这次给大家带来css做出波纹动画，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>

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

全部栏目

css做出波纹动画