javascript - CSS:使用关键帧填充图像

Question

这是图片: .

你知道进度条是怎么工作的，比如你给它赋值50，然后用javascript改成transition，就会很平滑，最后进度条会被填满。

现在，您看到图像中的白色部分了吗？

例如，有一个名为Votes 的字段。根据投票的值(value)，应该在咖啡图像中填充相同数量的颜色。 (替换等量的白色。)

是的，我可以冲印一百张图片，然后在 Photoshop 中完成，这很蹩脚。

有一种叫做关键帧的东西，也有动画，但我找不到使用 css 来制作动画的方法。

我在Behance上看到过，这就像是一件很平常的事情。疯狂的是，我无法在 Google 上找到它。

简单来说，根据票数，白色部分应该被等量的其他颜色代替。

像这样:Codepen.io: Image Filling progress

Answer 1

把图片变成透明png，图片后面有一个彩色div，根据投票数改变高度。