我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
先看下效果
实现思路
-
js可以操作文字吗？
- 貌似只可以操作文字的样式
-
那要怎样给文字赋予一些特效呢？
-
只需要影响文字外层的dom元素即可
-
怎样实现烟雾效果呢？
-
分析下，烟雾有哪些特性？
- 模糊效果，可以通过
blur来实现 - 移动效果，可以通过
transition+animation来实现 - 最后需要文字消失但是要保留之前占据的位置，可以通过
opacity来实现
- 模糊效果，可以通过
-
-
接下来只要监听
moveover事件，给moveover上的文字元素添加指定的动画class即可
具体实现
上面的思路基本说的很清晰了，我就不多赘述，直接上代码
拓展思考
具体实现不难，关键点弄清楚就基本明白了。
但是元素多了肯定会卡顿，可以做下优化，如果几秒内同时出现10个元素变化，则缩短后续动画的特效，比如动画更快，移动距离更短等。
当然，直接通过canvas来实现肯定更好
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
学习自老哥北极光之夜，感兴趣的可以去了解下。
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
