本文阿宝哥将给大家介绍十个 「“惊人"」 的文字动画效果，希望阿宝哥精心录制的十个 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-javascript-text-animation-snippets

 其他推荐

Vue3 Compiler 优化细节，如何手写高性能渲染函数

十大酷炫屌的图像悬停动画特效

这10个让你笑的合不拢嘴的GitHub项目，女装才是正义！

从 Element UI 源码的构建流程来看前端 UI 库设计

React-native源码解析

Vue.js 组件该如何正确的复用和扩展

你不知道的 Web Workers (上)

JS执行上下文的两个阶段做了些啥？

Vue3 的响应式和以前有什么区别？(源码级详解)

学会这个套路，彻底掌握排列组合。【会点算法的前端更早下班】

实战vue-ssr服务端渲染的单页应用

Vue3 尝鲜 Hook + TypeScript 取代 Vuex 实现图书管理小型应用

应用动态规划和贪心算法高效实现瀑布流布局

React 和 Vue 都在用的 FLIP 思想是什么？

懂这些JavaScript的骚操作，你可以更牛B

Vue3 的诞生的故事

从零解读Vue3.0源码响应式系统

如何使用Chrome来分析运行时的性能、内存问题 ？[太实用了]

超有料的前端性能优化总结(建议收藏)

CSS高级特效的必备技巧

图文并茂深度解析浏览器渲染原理，包看懂超值得收藏

Vue 的生命周期之间到底做了什么事清？(源码详解)

如何写出被Team Leader喜欢的JS 代码

前端面试128问汇总(含超详细答案)超详细webpack构建方式补给！ 超详细webpack基础补给！ 当你升级到前端的TL时，如何快速打造用于中小团队的前端基建 线上项目出现问题时如何快速调试定位问题？你确定你真的懂CSS吗？ 太齐了！前端的学习及工作资料只收藏这份就够了！ 大厂都在用的高级缓存方案 我这个页面居然用了10G的GPU？！！原来微信支付软件架构是这样哒！！！高级前端工程师是怎样高效部署前端应用？ 【撩妹教程】如何教公司新来的女实习生小姐姐什么是闭包？ 前端如何在繁忙的业务中提升自己大厂的高性能小程序原来是这样弄的！测试一下你离前端专家这个称号还有多远？

点在看的人特别帅/美