作者：semlinker
正向链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw
00-1010本文将向您介绍十种“令人惊叹”的文字动画效果。希望阿宝哥精心录制的十个Gif动画能让你感到“惊艳”。当然，希望这些特效能在你实现文字动画效果的时候给你带来一些启发。
前段时间，边肖也发布了几篇文章：
10个酷炫形象悬停动画特效“值得收藏”
推荐10款常用图像处理助手(一)“值得收藏”
推荐10款常用图像处理助手(下)“值得收藏”
“值得收藏”的15个常用在线工具网站列表
30个提高开发效率的必备VS代码插件“值得收藏”
更多干货资源请看本文底部！
前言
说明：这个例子将根据页面的文本生成文本分割动画。
示例来源：Arsen Zbidniakov
在线地址：https://codepen.io/ARS/pen/pjypwd
“静态渲染”
《Gif动态效果图》
文字破碎动画
示例：这个示例将基于页面中的文本产生文本效果。
例如：蜜桃红格纳罗索
在线地址：https://codepen.io/mtsgeneroso/pen/mdJRpxX
“静态渲染”
《Gif动态效果图》
文字彩虹效果
示例：本示例将基于页面中的文本产生笔画动画效果。
例如：克莱尔拉森
在线地址：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学习相关文章
四步CSS3教你搞定小菊花 Loading 动画
手把手教你CSS grid布局「香」
手把手教你20个CSS 快速提升技巧
细品100道CSS知识点（上）「干货满满」
细品100道CSS知识点（下）「干货满满」
手把手教你CSS Flex布局「真香」
细品用SVG实现一个优雅的提示框
手把手整理CSS3知识汇总【思维导图】
手把手教你55 个提高CSS 开发效率的必备片段
手把手教你常见的CSS布局方式【实践】
让CSS flex布局最后一行左对齐的N种方法
妙用CSS变量，让你的CSS变得更心动
纯CSS实现简单骨骼动画【实践】
CSS揭秘实用技巧总结
你未必知道的49个CSS知识点
深入浅出超好用的 CSS 阴影技巧
关于前端CSS写法104个知识点汇总（一）
关于前端CSS写法104个知识点汇总（二）
前端开发规范：命名规范、html规范、css规范、js规范
CSS变量实现暗黑模式，我的小铺页面已经支持
深入浅出CSS中彻底搞懂word-break、word-wrap、white-space
深入浅出详细讲解CSS 渲染原理以及优化策略
手把手教你深入CSS实现一个粒子动效的按钮
手把手教你css 中多种边框的实现小窍门【实践】
手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】
作者：semlinker
转发链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw
