利用html和css写一个手机充电特效

这是html代码：

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

这是css代码：

*{
    margin: 0px;
    padding: 0px;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    //这是渐变色代码，也可以用单一色代码
    background: #C9D6FF;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #E2E2E2, #C9D6FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.battery{
    width: 200px;
    height: 320px;
    /**/
    border-radius: 10px 10px 5px 5px;
    border: 1px solid red;
    overflow: hidden;
}
.cover{
    width: 100%;
    height: 100%;
　　//这里也是渐变色代码

 

    background: #F2994A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 10px 10px 5px 5px;
    border: 1px solid yellow;
    margin-top: 320px;
    animation: rotate 3s infinite linear;
}
@keyframes rotate {
    from{
        margin-top: 320px;
    }
    to{
        margin-top: 0;
    }
}