css做出波紋動畫

來源:互聯網
上載者:User
這次給大家帶來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>

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

CSS有幾種實現三欄布局的方法

CSS與Sass開發規範

CSS做出滑鼠上移表徵圖旋轉

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.