css华为手机充电效果

<div class="container">
        <div class="num">50%</div>
        <div class="circle"></div>
    <div class="boxs">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

     body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container{
            width: 600px;
            height: 600px;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

        }
        .num{
            position: absolute;
            color: bisque;
            top:28%;
            z-index: 10;
            font-size: 30px;
        }
        .circle{
            width: 200px;
            height: 200px;
            border-radius: 35%;
            background: greenyellow;
            position: absolute;
            top: 10%;
            animation: q 4s linear infinite;


        }
        .circle::before{
           content: "";
            position: absolute;
            width: 196px;
            height: 196px;
            background: black;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .boxs{
            position: absolute;
            bottom: 25px;
            width: 160px;
            height: 24px;

        }
        .boxs .box{
            position: absolute;

            background: greenyellow;
        }
        .box:nth-child(1){
            left:45px;
            top:50%;
            border-radius: 50%;
            transform: translate(-50%,-50%);
            width: 58px;
            height: 58px;
            animation: move 1s ease-in-out infinite;
        }
        .box:nth-child(12){
            left:55px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 56px;
            border-radius: 30%;
            height: 56px;
            animation: move 1.5s ease-in-out infinite;
        }
        .box:nth-child(3){
            left:110px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 50px;
            height: 50px;
            border-radius: 20%;
            animation: move 2s ease-in-out infinite;
        }
        .box:nth-child(4){
            left:115px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 48px;
            height: 48px;
            border-radius: 45%;
            animation: move 2.5s ease-in-out infinite;
        }
        .box:nth-child(5){
            left:117px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 48px;
            border-radius: 55%;
            height: 48px;
            animation: move 3s ease-in-out infinite;
        }
        .box:nth-child(6){
            left:120px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 46px;
            height: 46px;
            border-radius: 60%;
            animation: move 3.5s ease-in-out infinite;
        }
        .box:nth-child(7){
            left:125px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            animation: move 4s ease-in-out infinite;
        }
        .box:nth-child(8){
            left:127px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 38px;
            height: 38px;
            border-radius: 60%;
            animation: move 4.5s ease-in-out infinite;
        }
        .box:nth-child(9){
            left:130px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 38px;
            height: 38px;
            border-radius: 50%;
            animation: move 5.5s ease-in-out infinite;
        }
        .box:nth-child(10){
            left:165px;
            top:50%;
            transform: translate(-50%,-50%);
            width: 38px;
            border-radius: 50%;
            height: 38px;
            animation: move 5.5s ease-in-out infinite;
        }
        @keyframes q  {
          50%{
             border-radius: 45%;
          }
            100%{
                border-radius: 35%;
                transform: rotate(360deg);
            }
        }

        @keyframes move {
            90%{
                opacity: 1;
            }
            100%{
                opacity: 0.1;
                transform: translate(-50%,-330px);
            }
        }

效果：
比较简单适合我这样的小白练手