CSS：使用关键帧填充图像

Question

这是图片：。

你知道进度条是如何工作的，比如你给它的值是50，然后使用javascript来改变它的转换，它会很顺利，最后会填充进度条。

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

说，有一个名为Votes的字段。根据投票的价值，应在咖啡图像内填充相同数量的颜色。 （取代等量的白色。）

是的，我可以开发一百张图像，并在Photoshop中进行，这非常蹩脚。

有一种称为关键帧的东西，并且有动画，但我无法找到使用css动画的方法。

我在Behance上看过它，这就像一个非常普遍的事情。疯狂的是，我无法在谷歌上找到它。

简单来说，根据投票数量，白色部分应替换为等量的其他颜色。

像这样：Codepen.io: Image Filling progress

Answer 1

将图像转换为透明png，并根据投票数在图像更改高度后面加上彩色div。