css旋转充电动画 |css 火焰文

这个旋转充电动画的实现非常简单。大家只需要利用transform属性旋转元素，再利用 CSS 的@keyframes定义动画过程，最后通过animation属性来控制动画效果。让大家来看看完整的 CSS 代码：

.charging-icon {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #ccc;
position: relative;
overflow: hidden;
}
.charging-icon:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background-color: #fff;
transform: rotate(-45deg);
z-index: 2;
animation: charge 2s linear infinite;
}
.charging-icon:after {
content: '';
position: absolute;
top: 50%;
left: -100%;
width: 100%;
height: 3px;
background-color: #ccc;
transform: translate(0, -50%);
z-index: 1;
}
@keyframes charge {
0% {
transform: rotate(-45deg);
left: -100%;
}
100% {
transform: rotate(315deg);
left: 100%;
}
}

大家首先定义了一个.charging-icon类名，这个类名应用在大家所制作的图片，这里大家设置了图片宽高为 100 像素，边框大小为 3 像素，圆角为 50%。需要注意的是，大家设置了position: relative和overflow: hidden，这是为了控制充电效果的父元素和子元素关系。

接下来，大家利用:before伪类实现了充电时旋转动画，大家设置了content: ''和position: absolute，让它与原始元素重合。旋转时模拟充电过程，定义了一个@keyframes，使元素旋转一整圈，循环进行。

最后，大家使用:after伪类实现了一条直线，让线上移，并覆盖在充电效果之上，营造出更饱满的画面效果。这样，大家就完成了旋转充电动画制作。

以上是本次分享的 CSS 旋转充电动画，它实现了非常简单的代码，但可以带来非常酷炫的效果。相信在你的网站或应用中应用它，一定会为你带来惊喜和亮点。