十大驚人的文字動畫特效

時間 2020-07-07

標籤十大驚人文字動畫特效简体版

原文原文鏈接

本文阿寶哥將給你們介紹十個 「「驚人"」 的文字動畫效果，但願阿寶哥精心錄製的十個 Gif 動畫能讓你們感到 「」驚豔「」，固然更但願這些特效能給你們實現文字動畫效果時帶來一些 「」靈感「」。css

圖片懸停特效也很酷喲，趕忙來看看：「十大酷炫屌的圖像懸停特效」前端

閱讀阿寶哥近期熱門文章（感謝掘友的鼓勵與支持🌹🌹🌹）：git

文字破碎動畫

❝
示例說明：該示例會基於頁面的設置的文字，產生文字破碎動畫。github

示例來源：Arsen Zbidniakovweb

在線地址：https://codepen.io/ARS/pen/pjypwdtypescript
❞

「靜態效果圖」微信

「Gif 動態效果圖」編輯器

文字彩虹效果

❝
示例說明：該示例會基於頁面中的文字，產生🌈文字效果。post

示例來源：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 動畫應用在任何文本上。