我可以使用 PNG 作为此水动画的蒙版而不是 <text> 标签吗？
Can I use a PNG as a mask for this water animation instead of <text> tag?
所以我发现了这个惊人的 codepen 动画，它使用 （我认为是 GSAP）[对通过 <text> 标签提供的任何文本进行动画处理 "water filling" 效果=19=]
下方的 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
这里是 pen ,
从外部资源嵌入 codepen 时存在一个 cors 问题（如果您从同一个域提供服务，您可以克服这个问题...）
但是一旦你的路径内联就变得轻而易举了，只需将 id 更改为 text 脚本就会完成它的工作。
要调整动画，请更改 TweenMax.fromTo 选项
所以我发现了这个惊人的 codepen 动画，它使用 （我认为是 GSAP）[对通过 <text> 标签提供的任何文本进行动画处理 "water filling" 效果=19=]
下方的 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
这里是 pen ,
从外部资源嵌入 codepen 时存在一个 cors 问题（如果您从同一个域提供服务，您可以克服这个问题...）
但是一旦你的路径内联就变得轻而易举了，只需将 id 更改为 text 脚本就会完成它的工作。
要调整动画，请更改 TweenMax.fromTo 选项