css小demo(2) 电池效果

效果: 从思否 模仿的案例
![在这里插入图片描述](https://img-blog.csdn.net/20181012213130607?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzNTU0Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

静态页面

css代码

	body,hrml{
 	   height: 100%;
       background-color: aqua;
	}

.box{
    height: 60px;
    width: 150px;
    margin: 100px auto;
    border:10px solid rebeccapurple;
    position: relative;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, whitesmoke, whitesmoke);
    background-position: top 2px left 3px;
    background-size: 30% 90%;
    animation: change  3s steps(8) infinite  ;
    /* animation: charge 5s steps(8) infinite; */
}


.box::after{
    content: '';
    height: 20px;
    width: 1px;
    background-color: rebeccapurple;
    border: 5px solid rebeccapurple;
    position: absolute;
    top: 15px;
    right: -20px;
    border-radius: 0 2px 2px 0;
}

@keyframes change{

    0%{
        background-size: 10% 90%;
    }
    100%{
        background-size: 95% 90%;
    }

}