作者：semlinker

转发链接：
https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw

前言

本文小编将给大家介绍十个 「“惊人"」 的文字动画效果，希望阿宝哥精心录制的十个 Gif 动画能让大家感到 「”惊艳“」，当然更希望这些特效能给大家实现文字动画效果时带来一些 「”灵感“」。

前段时间小编也发布了几篇：

10个酷炫图像悬停动画特效「值得收藏」

推荐10个常用的图片处理小帮手（上）「值得收藏」

推荐10个常用的图片处理小帮手（下）「值得收藏」

15种常用的在线工具网站清单「值得收藏」

30个必备VS Code插件来提高开发效率「值得收藏」

更多的干货资源请见本篇文章底部！

文字破碎动画

示例说明：该示例会基于页面的设置的文字，产生文字破碎动画。

示例来源：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学习相关文章

四步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