这是我第三篇文章_yck 凯哥-优快云博客

下面我想要分享受一个 css3圆圈动画放大缩小循环动画效果的源码。
如下所示：

<!DOCTYPE html>
<html id="html" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>一个复杂的懒人原生css3动画效果</title>
    <style>
        body{ background:#202A38}
        img{display: block;}
        .cssBox {width: 360px;height: 360px;margin: 100px auto;background-color: #202A38;position: relative;}
        .cssBox .waveRaidus {
            margin-top: 4px;opacity: 0;
            position: absolute;left: 50%;
            top: 50%;-webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-animation: waveRaidus 1s ease-out 0s infinite;
            animation: waveRaidus 1s ease-out 0s infinite;
        }
        @-webkit-keyframes waveRaidus {
            0% {
                width: 90%;height: 90%;
                opacity: 0;
            }
            65% {
                width: 90%;height: 90%;
                opacity: 0;
            }
            66% {
                width: 90%;height: 90%;
                opacity: 0.8;
            }
            100% {
                width: 120%;height: 120%;
                opacity: 0;
            }
        }
        .cssBox .pointRadius {
            width: 205px;
            height: 205px;
            border: 2px solid #CCC;
            border-radius: 360px;
            background-color: #FFF;
            position: absolute;
            left: 50%;top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        @-webkit-keyframes waveRaidus_small {
            0% {
                width: 70%;height: 70%;
                opacity: 0;
            }
            65% {
                width: 70%;height: 70%;
                opacity: 0;
            }
            66% {
                width: 70%;height: 70%;
                opacity: 0.8;
            }
            100% {
                width: 90%;height: 90%;
                opacity: 0;
            }
        }
        .waveRaidus_small{
            margin-top: 4px;opacity: 0;
            position: absolute;left: 50%;
            top: 50%;-webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-animation: waveRaidus_small 1s ease-out 0s infinite;
            animation: waveRaidus_small 1s ease-out 0s infinite;
        }
    </style>
</head>
<body>

<div style="color:#fff;font-size:16px;text-align:center;">google浏览器打开查看效果</div>

<div class="cssBox">
    <div class="waveRaidus">
        <img src="images/1.png" width="100%" alt="">
    </div>
    <div class="waveRaidus_small">
        <img src="images/1.png" width="100%" alt="">
    </div>
    <div class="pointRadius">
        <img src="images/2.png" width="100%" alt="">
    </div>
</div>
</body>
</html>