利用css实现波纹动画效果实例

前端  /  管理员 发布于 7年前   143

效果图如下

实例代码如下

<!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>  <div class="box">   <a class="vr" href="http://vr.nibaoo.cn/01/"></a>   <div class="vr_wrap"></div>   <div class="vr_wrap2"></div>  </div> </body></html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对AIDI的支持。


  • 上一条：
    css 背景固定样式background-attachment属性基础
    下一条：
    利用Bootstrap实现漂亮简洁的CSS3价格表实例源码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客