作者：semlinker
转发链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw
前言
本文小编将给大家介绍十个 「“惊人"」 的文字动画效果，希望阿宝哥精心录制的十个 Gif 动画能让大家感到 「”惊艳“」，当然更希望这些特效能给大家实现文字动画效果时带来一些 「”灵感“」。
前段时间小编也发布了几篇：
更多的干货资源请见本篇文章底部！
文字破碎动画
?
示例说明：该示例会基于页面的设置的文字，产生文字破碎动画。
示例来源：Arsen Zbidniakov
在线地址：https://codepen.io/ARS/pen/pjypwd
?
「静态效果图」
「Gif 动态效果图」
文字彩虹效果
?
示例说明：该示例会基于页面中的文字，产生文字效果。
示例来源：Mateus Generoso
在线地址：https://codepen.io/mtsgeneroso/pen/mdJRpxX
?
「静态效果图」
「Gif 动态效果图」
文字描边动画
?
示例说明：该示例会基于页面中的文字，产生描边动画效果。
示例来源：Claire Larsen
在线地址：https://codepen.io/ClaireLarsen/pen/XmVyVX
?
「静态效果图」
「Gif 动态效果图」
文字呼吸动画
?
示例说明：该示例会基于页面中的文字，产生呼吸动画效果。
示例来源：Tee Diang
在线地址：https://codepen.io/cybercountess/pen/RwNXxyq
?
「静态效果图」
「Gif 动态效果图」
扭曲字母动画
?
示例说明：该示例会基于页面中的字母，产生 「7」 种不同的字母扭曲动画效果。
示例来源：Mamun Khandaker
在线地址：https://codepen.io/kh-mamun/pen/NdwZdW
?
「静态效果图」
「Gif 动态效果图（只展示其中 2 种效果）」
文字路径动画
?
示例说明：该示例会基于页面中的文字，产生路径动画效果。
示例来源：LegoMushroom
在线地址：https://codepen.io/sol0mka/pen/dFypl
?
「静态效果图」
「Gif 动态效果图」
文字外框线条动画
?
示例说明：该示例会基于页面中的文字，产生文字外框线条动画及文字滑动消失效果。
示例来源：Short
在线地址：https://codepen.io/short/pen/VyNqPa
?
「静态效果图」
「Gif 动态效果图」
文字阴影动画
?
示例说明：该示例会基于页面中的文字，产生文字阴影动画效果。
示例来源：carpe numidium
在线地址：https://codepen.io/carpenumidium/pen/hHjEJ/
?
「静态效果图」
「Gif 动态效果图」
激光手写粒子动画
?
示例说明：该示例会基于页面中的文字，产生激光手写粒子效果。
示例来源：Johan Karlsson
在线地址：https://codepen.io/DonKarlssonSan/pen/VazvQx
?
「静态效果图」
「Gif 动态效果图」
文字粒子散开动画
?
示例说明：该示例会基于页面中的文字，产生粒子散开动画效果。
示例来源：Hendry Sadrak
在线地址：https://codepen.io/hendrysadrak/pen/BNvrMm
?
「静态效果图」
「Gif 动态效果图」
在日常工作中，如果小伙伴们也想实现文字动画特效，阿宝哥推荐一个用于实现 CSS3 文本动画的插件 —— textillate.js。该插件建立在简单但功能强大的 animate.css 和 lettering.js 库之上，并且提供了简单易用的 API，让你轻松地将 CSS3 动画应用在任何文本上。
推荐CSS学习相关文章
深入浅出CSS中彻底搞懂word-break、word-wrap、white-space
手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】
作者：semlinker
转发链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw