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

阅读阿宝哥近期热门文章（感谢掘友的鼓励与支持🌹🌹🌹）：

• 十大酷炫屌的图像悬停特效（529+ 个👍）
• 1.2W字 | 了不起的 TypeScript 入门教程（1181+ 个👍）
• 让人眼前一亮的 10 大 TS 项目（674+ 个👍）
• 一文读懂 TypeScript 泛型及应用（ 7.8K字）（536+ 个👍）
• 图片处理不用愁，给你十个小帮手（420+ 个👍）
• 前端存储除了 localStorage 还有啥（399+ 个👍）

文字破碎动画

❝

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

示例来源：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 动画应用在任何文本上。

❝

创建了一个 「“全栈修仙之路交流群”」 的微信群，想加群的小伙伴，加我微信 "semlinker"，备注 「2」。阿里、京东、腾讯的大佬都在群里等你哟。

semlinker/awesome-typescript 1.6K

❞

本文使用 mdnice 排版