直播css小动画

深碍√TFBOYSˉ_ 2023-01-04 14:52 79阅读 0赞

直播css小动画

今天写页面的时候 UI出了一个icon动画需求，我本以为这个是要ui出一个gif图的，结果她让我写个动画，本来向怼她的，但是转念一想我也没做过这样的动画，就试试呗！

大概就是这么个玩意儿：  
![在这里插入图片描述][20210110225058740.gif]

上代码：

<!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>
            .body { 
                width: 20px;
                height: 20px;
                background-color: #aaa;
                justify-content: space-between;
                display: flex;
            }
    
            .box { 
                width: 4px;
                height:20px;
                background-color: #eee;
                border-radius: 4px;
            }
    
    
            .move1 { 
                transform: scaleY(0.2);
                animation: mymove1 0.7s 0.1s infinite linear alternate;
            }
    
            .move2 { 
                transform: scaleY(1);
                animation: mymove2 0.7s 0.4s infinite linear alternate;
            }
    
            .move3 { 
                transform: scaleY(0.1);
                animation: mymove3 0.7s 0.4s infinite linear alternate;
            }
    
            @keyframes mymove1 { 
                0% { 
                    transform: scaleY(0.2);
                }
    
                100% { 
                    transform: scaleY(1);
                }
            }
    
            @keyframes mymove2 { 
                0% { 
                    transform: scaleY(1);
                }
    
                100% { 
                    transform: scaleY(0.3);
                }
            }
    
            @keyframes mymove3 { 
                0% { 
                    transform: scaleY(0.1);
                }
    
                100% { 
                    transform: scaleY(1);
                }
            }
        </style>
    </head>
    
    <body>
    
        <div class="body">
            <div class="box move1"></div>
            <div class="box move2"></div>
            <div class="box move3"></div>
        </div>
    
    
    </body>
    
    </html>

[20210110225058740.gif]: /images/20221119/24e3d583d96b482fb0ba530bcb722203.png