徽标充满水CSS预加载器

Question

我想从徽标创建一个预加载器，看起来好像徽标充满了液体。我想使用纯CSS。

谷歌搜索时发现Filling a glass with Water。但它的问题是它只填充矩形形式。徽标为黑/白。我有各种格式的PNG，JPEG，SVG。这是精灵中的图形表示：

http://i.stack.imgur.com/WeF9r.png

它也必须具有像PNG一样的透明背景。

Answer 1

在矩形顶部创建徽标和图层的“反向剪切”。

Answer 2

如果没有清楚地了解您想要实现的目标，那么根据一个假设，这将是最简单的方法：

1. 使用正确的背景颜色保存您的徽标的PNG 徽标切口字母（透明）。
2. 在HTML页面中创建一个容器，该容器具有简单的“填充”功能。动画。
3. 将PNG放在＆＃39;填充＆＃39;之上。使用绝对定位的容器。

结果：A＆＃39;填充＆＃39;标志。