使用JS前端技术实现静态图片局部流动效果
目录
背景 效果 实现 HTML 页面结构 feTurbulence 和 feDisplacementMap CSS 样式 mask-image JavaScript 方法 ① 绘制热点图 ② 生成动画 ③ 清除画布 ④ 切换图片 总结声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
背景
如果你有玩过
《王者荣耀》
、《阴阳师》
等手游,一定注意到过它的启动动画、皮肤立绘卡片等场景,经常采用静态底图加局部液态流动效果的简单动画,这些流动动画可能出现在缓缓流动的水流 、迎风飘动的旗帜
、游戏角色衣袖