❞
「静态效果图」
「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 动画应用在任何文本上。