<div class="battery"></div>

html, body {

    margin:;

    padding:;

    height: 100%;

    display:flex;

    justify-content: center;

    align-items: center;

    /*background: linear-gradient(to bottom, teal, aqua); */

}

.battery{

    width: 6em;

    height: 3em;

    color: midnightblue;

    border: 0.5em solid currentColor;

    border-radius: 0.2em;

    font-size: 2em;

    position: relative;

    /* 充电颜色 */

    background-image: linear-gradient(to right, green, green);

    background-repeat: no-repeat;

    background-size: 30% 80%;

    /* 给内部充电图像定位  */

    background-position: top 0.3em left 0.3em;

    animation: charge 5s steps(8) infinite;

}

.battery::after{

    position: absolute;

    content: '';

    width: 0.5em;

    height: 2em;

    background-color: currentColor;

    top: 0.5em;

    right: -1em;

    border-radius: 0 0.2em 0.2em 0;

}

@keyframes charge {

    from {

        background-size: 10% 80%;

    }

    to {

        background-size: 95% 80%;

    }

}