大峰笔记

.battery {
position: relative;
width: 80px;
height: 30px;
background-color: #fefefe;
margin: 0 auto;
border-radius: 5px;
}
.inner {
position: absolute;
top: 4px;
left: 4px;
bottom: 4px;
width: 30px;
background-color: #29d;
border-radius: 2px;
}
.outer {
position: absolute;
top: 2px;
left: 2px;
bottom: 2px;
right: 2px;
border: 3px solid #666;
border-radius: 5px;
}
.battery:before {
content: “”;
position: absolute;
top: 5px;
left: 65px;
width: 10px;
height: 20px;
border-radius: 2px;
}
.battery:after {
content: “”;
position: absolute;
top: 11px;
left: 80px;
width: 2px;
height: 8px;
background-color: #666;
}

/* 电量色块 */
.inner{
animation: heightAnimate 4s ease-out infinite ;
}
@keyframes heightAnimate{
100%{
width: 90%;
}
}