css电池动画 |css注销代码

html：
css：
.battery {
width: 80px;
height: 40px;
position: relative;
z-index: 1;
border: 1px solid #888;
border-radius: 5px;
overflow: hidden;
}
.battery_inside {
width: 70px;
height: 30px;
position: absolute;
z-index: 2;
top: 5px;
left: 5px;
background-color: #ccc;
}
.battery_outside {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #222;
animation: battery 2.5s linear infinite;
}
.battery_indicate {
width: 5px;
height: 10px;
position: absolute;
top: 15px;
right: 5px;
z-index: 3;
background-color: #ffc127;
animation: indicate 1.25s ease-in-out infinite alternate;
transform-origin: center bottom;
}
@keyframes battery {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1, 1.5);
}
100% {
transform: scale(1, 1);
}
}
@keyframes indicate {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(1.5);
}
}

大家通过定义一个class为.battery的div标签，然后再内部定义三个div标签作为电池内部、外部以及电量指示器。在CSS代码中，大家通过定义相应的属性和动画效果来实现这个电池充电的动画效果。

.battery_inside用于定义电池内部的矩形区域，.battery_outside则是定义的电池外部的矩形区域，并且它的背景色是黑色的。.battery_indicate则是电量指示器，大家使用黄色来表示电量的满状态，这个指示器还需要实现定时闪烁的效果，大家使用@keyframes来实现。

.battery_outside使用animation属性，把它的@keyframes名称作为属性值并且指定持续时间为2.5s，这就使得这个div标签实现了一个有节奏的闪烁效果，来模拟充电状态。而.battery_indicate也是采用了一个类似的方式来实现定时闪烁的效果。

最后，大家通过定义两个@keyframes实现了缩放效果和震动效果，这使得整个电池充电效果看上去更加生动有趣。