用css动画写一个同心圆呼吸灯_css 圆形呼吸灯-CSDN博客

本文链接：https://blog.csdn.net/qq_44449336/article/details/108594450

在这里插入图片描述有不同写法欢迎交流探讨

        <style>
        /* 设置黑色桌面 */
        .desk {
            width: 400px;
            height: 600px;
            background-color: black;
            margin: auto;
        }

        /* 用来放置同心圆 */
        .circle {
            width: 400px;
            height: 400px;
        }

        .circle,
        .out,
        .in {
            /* 将边框变圆 */
            border-radius: 50%;
            /* 设置成同心 */
            display: flex;
            justify-content: center;
            align-items: center;
            animation-duration: 9s;
            /* 循环 */
            animation-iteration-count: infinite;
            /* 匀速播放 */
            animation-timing-function: linear;
        }

        /* 设置外圈圆 */
        .out {
            border: 9px solid #999999;
            animation-name: out;

        }

        /* 设置内圈圆 */
        .in {
            border: 25px solid white;
            animation-name: in;
        }

        /* 设置文字 */
        .word {
            height: 74px;
            font-size: 50px;
            text-align: center;
            line-height: 74px;
            color: white;
            font-family: Calibri;
        }

        /* 外圈圆动画 */
        @keyframes out {

            /* 前4秒放缩 */
            0% {
                width: 260px;
                height: 260px;
            }

            22.222% {
                width: 280px;
                height: 280px;
            }

            /* 后5秒不动 */
            44.444% {
                width: 260px;
                height: 260px;
            }

            100% {
                width: 260px;
                height: 260px;
            }
        }

        /* 内圈圆动画 */
        @keyframes in {

            /* 前4秒不动 */
            0% {
                width: 180px;
                height: 180px;
            }

            44.5% {
                width: 180px;
                height: 180px;
            }

            /* 后5秒缩放 */
            72.222% {
                width: 156px;
                height: 156px;
            }

            100% {
                width: 180px;
                height: 180px;
            }
        }
    </style>
    </head>

    <body>
        <div class="desk">
            <div class="circle">
                <div class="out">
                    <div class="in"></div>
                </div>
            </div>

            <div class="word">HI!</div>
        </div>
    </body>