动画自定义电池填充图标

Question

我正在跨平台的Ionic移动应用程序中使用HTML，CSS和Javascript。我想创建一个"实时"电池填充图形，因此电池轮廓具有模拟 （ish） 填充，它随着电量百分比而移动。

我显然可以每 5% 等将源图像替换为不同的图片，但这似乎不是一个很好的方法。有没有更简洁的使用JS的方法？

Answer 1

您可以使用以下内容来执行此操作;

1. 几个 HTML 容器，用于表示电池轮廓和电池电量。

2. 使用javascript操纵电池充电容器的"高度"

   setInterval(function(){ if(batteryPercentage <= 100){ batteryInner.style.height = batteryPercentage + '%'; batteryPercentage += 5; } }, 100)

3. 对电池充电容器上的高度使用 css 过渡来对高度变化进行动画处理。

快速和肮脏的示例 https://jsfiddle.net/r2unrg31/

更新的小提琴

根据评论，这里有一个更新的小提琴 https://jsfiddle.net/r2unrg31/1/

请注意，您可以将其整齐以在凹口顶部包含边框。另请注意，"缺口"的背景颜色需要与您平台的背景颜色相匹配。