事实上，我们看到的很多酷炫的网页动画效果都是通过CSS来实现的，但很少是纯使用CSS实现。本文我们就循序渐进，看看只使用 CSS ，可以鼓捣出什么样的充电动画效果。

1.画个电池

当然，电池充电，首先得用 CSS 画一个电池，这个不难，随便整一个：

因为是比较简单的动画实现，所以，我们没有太高的要求，勉强能用就行。有了电池，那接下来直接充电吧。最最简单的动画，那应该是用色彩把整个电池灌满即可。

方法很多，代码也很简单，直接看效果：

看起来还不错，如果要求不高，这个勉强也就能够交差了。通过蓝色渐变表示电量，通过色块的位移动画实现充电的动画。但是总感觉少了点什么。

2.增加阴影及颜色的变化

如果要继续优化的话，需要添加点细节。

我们知道，低电量时，电量通常表示为红色，高电量时表示为绿色。再给整个色块添加点阴影的变化，呼吸的感觉，让充电的效果看起来确实是在动。

到这里，其实只有一个知识点：使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画

我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调整，从而实现了渐变色的变换动画。

上述例子完整的 Demo： 

html,
body {
    width: 100%;
    height: 100%;
    display: flex;
    background: #e4e4e4;
}

.container {
    position: relative;
    width: 140px;
    margin: auto;
}

.battery {
    height: 220px;
    box-sizing: border-box;
    border-radius: 15px 15px 5px 5px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
    background: #fff;
    z-index: 1;
    
    &::before {
        content: "";
        position: absolute;
        width: 26px;
        height: 10px;
        left: 50%;
        top: 0;
        transform: translate(-50%, -10px);
        border-radius: 5px 5px 0 0;
        background: rgba(240, 240, 240, .88);
    }
    
    &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 90%;
        background: linear-gradient(to bottom, #7abcff 0%, #00BCD4 44%, #2196F3 100%);
        border-radius: 0px 0px 5px 5px;
        box-shadow: 0 14px 28px rgba(33, 150, 243, 0), 0 10px 10px rgba(9, 188, 215, 0.08);
        animation: charging 6s linear infinite;
        filter: hue-rotate(90deg);
    }
}

@keyframes charging {
	50% {
        box-shadow: 0 14px 28px rgba(0, 150, 136, 0.83), 0px 4px 10px rgba(9, 188, 215, 0.4);
    }
    
    95% {
        top: 5%;
        filter: hue-rotate(0deg);
        border-radius: 0 0 5px 5px;
        box-shadow: 0 14px 28px rgba(4, 188, 213, .2), 0 10px 10px rgba(9, 188, 215, 0.08);
    }
    100% {
        top: 0%;
        filter: hue-rotate(0deg);
        border-radius: 15px 15px 5px 5px;
        box-shadow: 0 14px 28px rgba(4, 188, 213, 0), 0 10px 10px rgba(9, 188, 215, 0.4);
    }
}

3.添加波浪

到这里，刚刚算一个小里程碑，接下来再进一步。电量的顶部为一条直线有点呆呆的感觉，这里我们进行改造一下，如果能将顶部直线，改为波浪滚动，效果会更为逼真一点。

改造之后的效果：

这里的一个知识点就是上述说的使用 CSS 实现简易的波浪效果，通过障眼法实现，看看图就明白了：

 

 

OK，到这，上述效果加上数字变化已经算是一个比较不错的效果了。当然上面的效果看上去还是很 CSS 的，就是一眼看到就觉得用 CSS 是可以做到的。当然我们这里的充电动画效果比较简陋，想要制作出更好的充电动画效果，我们可以参考动力节点在线的实例源码，结合自己的要求添加一些新的元素。