更多内容请访问：与华为官方共建的鸿蒙科技社区https://ost.51cto.com前言最近而研究HarmonyOS开发文档，发现transform风格的动画很有意思，就用现有的方法写了一个移动的充电效果。实现过程1.画出电池的轮廓首先，我们用css画出电池。画一个长方形，我们需要在正方形的四个角上加上一点弧度，然后画一个电池头。只有电池的轮廓出来了。我在里面加了一点颜色供以后查看。先画一个电池。2.添加一个div来实现动画效果。我打算用面具来解决这个问题。面具不需要添加太多细节。宽度和高度与蓝色div相同。然后使用overflow:hidden来实现遮罩效果。下一步就是让白色的div移动。。二、电池动画效果1、需要让电池出现充电效果。这时候就需要使用一个效果来增加电池电量了。这足以使用翻译动画。如果加上mask属性就更好了。.mask2{位置：绝对；高度：220px；宽度：140px；左：50%；转换：翻译（-50%，50%）；边框半径：15px15px5px5px；背景：线性渐变（#7abcff，#2196F3）；溢出：隐藏；}电池梯度。背景：线性渐变（#7abcff，#2196F3）；面具效果。溢出：隐藏；.mask3{位置：绝对；宽度：150px；高度：220px；底部：140px；左：50%；转换：翻译（-50%，-80）；z-索引：1；动画：向下6s快出-线性-进无限；background-color:#ffffff;}电池平移动画。动画：向下6s快出-线性-进无限；/*cssbounce*/@keyframesdown{/*停止*/0%{transform:translate(0px,200px);}/*上升*/10%{transform:translate(0px,180px);}/*up*/20%{transform:translate(0px,160px);}/*up*/30%{transform:translate(0px,140px);}/*up*/40%{transform:translate(0px,120px);}/*up*/50%{transform:translate(0px,100px);}/*up*/60%{transform:translate(0px,80px);}/*up*/70%{transform:translate(0px,60px);}/*向上*/80%{transform:translate(0px,40px);}/*up*/90%{transform:translate(0px,20px);}/*起始位置*/100%{transform:translate(0px,0px);}}给100%的越多，动画就会越细腻。3、拓展11、充电时如果需要旋转电池，只需要将平移效果换成旋转即可。.mask3{位置：绝对；宽度：150px；高度：150px；底部：140px；左：50%；转换：翻译（-50%，0）；z-索引：1；动画：无限旋转4s；:70px63px60px66px;背景色：#ffffff;}旋转动画。animation:rotate4sinfinite;/*cssrotation*/@keyframesrotate{from{transform:rotate(0deg)}到{transform:rotate(360deg);}}4.扩展2也可以通过增加按钮来增加改变颜色样式，首先需要将css中的颜色样式移到js中，方便后续切换，然后在js中编写需要更换的电池颜色样式.
