十大惊人的文字动画特效

Question

文字破碎动画

• 示例说明：该示例会基于页面的设置的文字，产生文字破碎动画。
• 示例来源：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 动画应用在任何文本上。