水波

作者: tingshuo123 | 来源:发表于2018-09-14 10:43 被阅读6次

水波
水波
水波
水波
水波
水波
水波
水波
水波
水波——（2）水波不运动

<!DOCTYPE html>
<html>
<head>
    <title>分隔线</title>
    <style type="text/css">

        .outer {
            width: 400px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .outer .item {
            position: absolute;;
            border-radius: 50%;
            opacity: 0;

            /*波纹效果*/
            width: calc(150% - 6px);
            height: calc(150% - 6px);
            border: 3px solid gray;
        }

        .outer .item:first-child {
            animation: anim 4s infinite;

        }
        .outer .item:nth-child(2) {
            animation: anim 4s infinite;
            animation-delay: .8s;
        }
        .outer .item:nth-child(3) {
            animation: anim 4s infinite;
            animation-delay: 1.6s;
        }
        .outer .item:nth-child(4) {
            animation: anim 4s infinite;
            animation-delay: 2.4s;
        }
        .outer .item:nth-child(5) {
            animation: anim 4s infinite;
            animation-delay: 3.2s;
        }
        .outer .item:nth-child(6) {
            animation: anim 4s infinite;
            animation-delay: 4s;
        }

        @keyframes anim {
            from {
                opacity: 1;
                transform: scale(0);
            }
            to {
                opacity: 0;
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>