css电池充电效果-低配版

女爷i 2022-11-05 04:27 196阅读 0赞

#### css电池充电效果-低配版 ####

主要用到了：渐变、c3动画

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
    
            .box { 
                padding-top: 300px;
                width: 800px;
                height: 800px;
                background-color: #000;
                margin: 0 auto;
                position: relative;
            }
    
            .bettery { 
                width: 200px;
                height: 320px;
                background-color: #fff;
                margin: 100px auto;
                border-radius: 15px 15px 5px 5px;
                position: relative;
            }
    
            .tops { 
                position: absolute;
                content: '';
                width: 50px;
                height: 20px;
                background-color: #fff;
                border-radius: 5px 5px 0 0;
                top: -20px;
                left: 50%;
                transform: translate(-50%);
            }
    
            .bettery::after { 
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 90%;
                bottom: 0;
                background: linear-gradient(to bottom, #7abcff 0%, #008bcd 44%, #2196f3 100%);
                animation: change 5s linear infinite;
            }
    
            @keyframes change { 
                0% { 
                    top: 100%;
                    filter: hue-rotate(90deg);
                }
    
                95% { 
                    top: 5%;
                    border-radius: 0px;
                }
    
                100% { 
                    top: 0;
                    border-radius: 15px 15px 0 0;
                    filter: hue-rotate(0deg);
                }
    
            }
    
            @keyframes change2 { 
                0% { 
                    top: 100%;
                    filter: hue-rotate(90deg);
                }
    
                95% { 
                    top: 5%;
                    border-radius: 0px;
                }
    
                100% { 
                    top: 0;
                    border-radius: 15px 15px 0 0;
                    filter: hue-rotate(0deg);
                }
    
            }
        </style>
    </head>
    
    <body>
    
        <div class="box">
    
            <div class="bettery">
                <div class="tops"></div>
            </div>
        </div>
    
    </body>
    
    </html>