CSS波纹动画

波纹动画

在此运用到css的动画属性，以及背景等相关属性。

值得一说的是下面代码中一直写到的这样一行代码：filter: alpha(opacity=0~100) ，这是考虑到浏览器兼容的问题。

IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。

左上角的圆圈是个动图，点击就能链接到我的博客地址。

代码如下图所示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css波纹动画</title>

        <style>

            body{

                background: #000;

            }

            .box{

                width: 100%;

                height: 600px;

                background: skyblue;

            }

            .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="https://www.cnblogs.com/shihaiying/"></a>

            <div class="vr_wrap"></div>

            <div class="vr_wrap2"></div>

        </div>

</body>

</html>

效果图：

以上就是css波纹动画的代码和效果图。想要看具体的效果可以复制代码浏览，当然啦，也可以设置属于自己的漂亮的背景颜色和链接。

希望有所帮助！！！