目录

背景 效果 实现 HTML 页面结构 feTurbulence 和 feDisplacementMap CSS 样式 mask-image JavaScript 方法 ① 绘制热点图 ② 生成动画 ③ 清除画布 ④ 切换图片 总结

声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。

背景

如果你有玩过 《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，这些流动动画可能出现在缓缓流动的水流 、迎风飘动的旗帜 、游戏角色衣袖