模仿手机信号动画

最新推荐文章于 2024-07-30 23:06:43 发布

旺旺彐彐

最新推荐文章于 2024-07-30 23:06:43 发布

阅读量130

点赞数 2

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/aiteshanshan/article/details/140801570

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            :root {
                --opacity-type-0: 0;
                --opacity-type-1: 1;
                --opacity-type-2: 0.4;
                --opacity-type-3: 0.1;
            }
            .signal {
                width: 44px;
                height: auto;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: flex-end;
            }
            .signal div {
                background-color: rgb(199, 198, 198);
                border-radius: 35%;
            }
            #first {
                width: 6px;
                height: 5px;
                opacity: var(--opacity-type-0);
                animation-name: signal1;
                animation-iteration-count: infinite;
                animation-duration: 1s;
            }
            #second {
                width: 6px;
                height: 10px;
                opacity: var(--opacity-type-0);
                animation-name: signal2;
                animation-iteration-count: infinite;
                animation-duration: 1s;
            }
            #third {
                width: 6px;
                height: 15px;
                opacity: var(--opacity-type-0);
                animation-name: signal3;
                animation-iteration-count: infinite;
                animation-duration: 1s;
            }
            #fourth {
                width: 6px;
                height: 20px;
                opacity: var(--opacity-type-0);
                animation-name: signal4;
                animation-iteration-count: infinite;
                animation-duration: 1s;
            }

            @keyframes signal1 {
                0% {
                    opacity: var(--opacity-type-1);
                }
                25% {
                    opacity: var(--opacity-type-2);
                }

                50% {
                    opacity: var(--opacity-type-0);
                }
                100% {
                    opacity: var(--opacity-type-0);
                }
            }

            @keyframes signal2 {
                0% {
                    opacity: var(--opacity-type-0);
                }
                25% {
                    opacity: var(--opacity-type-1);
                }
                50% {
                    opacity: var(--opacity-type-2);
                }
                100% {
                    opacity: var(--opacity-type-0);
                }
            }

            @keyframes signal3 {
                0% {
                    opacity: var(--opacity-type-0);
                }
                25% {
                    opacity: var(--opacity-type-3);
                }
                50% {
                    opacity: var(--opacity-type-1);
                }
                100% {
                    opacity: var(--opacity-type-0);
                }
            }
            @keyframes signal4 {
                0% {
                    opacity: var(--opacity-type-0);
                }
                25% {
                    opacity: var(--opacity-type-0);
                }
                50% {
                    opacity: var(--opacity-type-3);
                }
                100% {
                    opacity: var(--opacity-type-1);
                }
            }
        </style>
    </head>
    <body>
        <div class="signal">
            <div id="first"></div>
            <div id="second"></div>
            <div id="third"></div>
            <div id="fourth"></div>
        </div>
    </body>
</html>