我可以使用PNG作为此水动画的遮罩而不是<text>标签吗？

Question

所以我发现了这个令人惊奇的codepen动画，它使用（GSAP我认为）

通过<text>标签为任何文本提供“注水”效果。

Codepen截图 的 CLICK HERE FOR CODEPEN

我的问题：我如何使用.PNG图片代替HTML文字来获得相同的效果？

例如

而不是当前代码： <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>

我希望

更多

<img src="LOADING.png" id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" width="569" height="186">

加载 .PNG IMG 的示例可以使用：（与上面的<img>代码段尺寸相同）

感谢您的帮助！对这些东西不是最好的，并且很想使用这个效果！

如果效果更好，则上面发布的png文件的 SVG ：imgh.us/loadingpng.svg

Answer 1

这是pen，

从外部资源嵌入codepen有一个cors问题（如果你在同一个域中提供服务，你可以克服这个问题......）

但是一旦你的路径内联就变得轻而易举，只需将id更改为text，脚本就可以完成它的工作。

用于调整动画更改TweenMax.fromTo选项