使用JS前端技术实现静态图片局部流动效果

目录

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

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

背景

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