充电效果（动态）

*{
    padding: 0;
    margin: 0;
}
.box{
    width: 800px;
    height: 800px;
    background-color: black;
    margin: 20px auto;
    /* 上下，左右 */
    position: relative;
}
.battery{
    width: 200px;
    height: 320px;
    background-color:white;
    margin-left: 20px;
    /* margin-top: 40px; */
    position: relative;
    top: 40px;
    border-radius: 15px  15px  0px  0px;
}
.battery::before{
    content: "";
    width: 50px;
    height: 20px;
    background-color: white;
    position: absolute;
    top: -20px;
    left: 38%;
}
.battery::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 90%;
    background-image: linear-gradient(to bottom,#7abcff 0%,#00BCD4 44%,#2196F3 100%);
    animation: change 10s linear infinite;
}
@keyframes change{
    0%{
        top: 100%;
        filter: hue-rotate(90deg);
    }
    95%{
        top: 5%;
        border-radius: 0;
    }
    100%{
        top: 0%;
        filter: hue-rotate(0deg);
        border-radius: 15px 15px 0px 0px;
    }
}
.cover{
    width: 100%;
    height: 100%;
    /* background-color: white; */
    border-radius: 15px 15px 0px 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}
.cover::before{
    content: "";
    width: 400px;
    height: 400px;
    background-color:rgba(255, 255, 255, 0.8) ;
    position: absolute;
    left: -50%;
    border-radius: 42% 40%;
    animation: coverbefore 10s linear infinite;
}
@keyframes coverbefore{
    0%{
        transform:rotate(0deg);
        bottom: 0%;
    }
    100%{
        transform:rotate(360deg);
        bottom:100% ;
    }
}
.cover::after{
    content: "";
    width: 400px;
    height: 400px;
    background-color:rgba(255, 255, 255, 0.8) ;
    position: absolute;
    left: -50%;
    border-radius: 42% 40%;
    animation: coverafter 10s linear infinite;
}
@keyframes coverafter{
    0%{
        transform:rotate(30deg);
        bottom: 2%;
    }
    100%{
        transform:rotate(360deg);
        bottom:95% ;
    }
}
.contrast{
    width: 70%;
    height: 70%;
    background-color: black;
    position: absolute;
    top: 20px;
    left: 30%;
    filter: contrast(15);
    animation: huerotate 5s linear infinite;
}
@keyframes huerotate{
    0%{
        filter: contrast(15) hue-rotate(0);
    }
    100%{
        filter: contrast(15) hue-rotate(360deg);
    }
}
.circle{
    width: 300px;
    height: 300px;
    /* background-color: aquamarine; */
    position: absolute;
    top: 0;
    left: 50%;
    filter: blur(8px);
    margin-left: -150px;
    animation: circlerotate 5s linear infinite;
}
@keyframes circlerotate{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
.circle::before{
    content: "";
    width: 200px;
    height: 200px;
    background-color: #00ff6f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 42% 38% 64% 49%/45%;
}
.circle::after{
    content: "";
    width: 180px;
    height: 178px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius:50%;
}
.number{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 9%;
    left: 65%;
    margin-left: -100px;
    color: white;
    z-index: 1;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
.bubble_home{
    width: 150px;
    height: 50px;
    background-color: #00ff6f;
    position: absolute;
    bottom: 0;
    left: 38%;
    border-radius: 150px 150px 15px 15px;
    filter: blur(8px);
}
.bubble{
    /* width: 20px;
    height: 20px;
    background-color: #00ff6f;
    border-radius: 100%; */
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    /* transform: translate(-50%,0); */
    animation: bubblemoveup 5s ease-in-out infinite;
}
@keyframes bubblemoveup{
    0%{
        bottom: 0;
    }
    100%{
        bottom: calc(100% - 260px);
    }
}
.bubble:nth-child(1){
    width: 20px;
    height: 20px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1s;
    animation-delay: 2s;
    left: 50%;
}
.bubble:nth-child(2){
    width: 22px;
    height: 20px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 3s;
    animation-delay: 1.5s;
    left: 55%;
}
.bubble:nth-child(3){
    width: 25px;
    height: 25px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1s;
    animation-delay: 3s;
    left: 59%;
}
.bubble:nth-child(4){
    width: 18px;
    height: 18px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 0.5s;
    animation-delay: 2s;
    left: 40%;
}
.bubble:nth-child(5){
    width: 27px;
    height: 27px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1s;
    animation-delay: 2s;
    left: 44%;
}
.bubble:nth-child(6){
    width: 25px;
    height: 25px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1.1s;
    animation-delay: 2.5s;
    left: 55%;
}
.bubble:nth-child(7){
    width: 20px;
    height: 20px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1.5s;
    animation-delay: 5s;
    left: 50%;
}
.bubble:nth-child(8){
    width: 17px;
    height: 17px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 3s;
    animation-delay: 6s;
    left: 56%;
}
.bubble:nth-child(9){
    width: 21px;
    height: 25px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1s;
    animation-delay: 2s;
    left: 57%;
}
.bubble:nth-child(10){
    width: 20px;
    height: 15px;
    background-color: #00ff6f;
    border-radius: 100%;
    animation-duration: 1.5s;
    animation-delay: 1.5s;
    left: 44%;
}

用css的话要用link外联套进去，或者用style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>充电效果</title>
    <link rel="stylesheet" href="D:\Users\熊小玲\Desktop\云计算\第十天\css\demo01.css">
</head>
<body>
    <div class="box">
        <div class="battery">
            <div class="cover"></div>
        </div>
        <div class="number">95.8</div>
        <div class="contrast">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <span class="bubble_home"></span>
            <div class="circle"></div>
        </div>
    </div>
</body>
</html>

写这个头都大了，但是主要是把框架搭好，自己有想法，下一步应该加什么，好像也不是那么难了