标志被水填满 CSS Preloader [关闭]

Question

我想从一个标志创建一个预加载器，它应该看起来好像标志被液体填充。我想使用纯 CSS。

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

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

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

Answer 1

为您的徽标创建一个“反向剪裁”，并将其放在矩形顶部。

Answer 2

如果没有清楚地了解您到底想要实现什么，这将是基于假设实现您想要的最简单的方法：

1. 使用正确的背景颜色和 徽标切口的字母（透明）。
2. 在您的 HTML 页面中创建一个包含简单“填充”动画的容器。
3. 使用绝对定位将 PNG 放在“填充”容器的顶部。

结果：“填充”徽标。