<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      Menu

      10個驚人的動畫文本CSS和JavaScript代碼片段

      <返回列表

      你可以用基本的CSS和幾行JavaScript制作一些非常炫目的文本效果。這些效果的范圍從文本顯示動畫到三維旋轉或任何你能想象到的東西。

      在這篇文章中,我列舉了10個網絡上最酷的例子,展示了你只需要一點樣式化的文本和CSS代碼就可以做什么。

      你可能也喜歡這些CSS動畫工具 .

      1.標題動畫

      羅賓·特雷爾的這部動畫片名效果沿襲了許多電影或電子游戲的風格。字母采用了突出的三維效果使用CSS3文本陰影和輕微的對角線傾斜。

      淡入動畫風格讓我想起了20世紀30年代的經典電影,同樣的傾斜文本。一切都是通過CSS控制的,但是“重啟”按鈕是用JavaScript構建的。這樣,可以多次播放動畫以獲得更好的效果。

      2.粉碎

      用After Effects之類的工具創建破碎的文本是一項簡單的任務,但是用代碼創建文本破碎動畫要困難得多,這使得arsenzbidniakov的這支筆給人留下了深刻的印象。

      文本實際上是用SVG形狀這使得動畫制作過程更容易一些。這也意味著你不能像平常一樣選擇、復制或與文本交互。

      如果你能用你的網站添加類似的效果為了一個標志或其他非交互式頁面元素。

      3.扭曲的字母

      開發人員Mamun Khandaker將這些扭曲字母動畫集合在一起。每個動畫樣式都有不同的名稱,您可以在這支筆中瀏覽它們。

      我可以看到這些文本效果在工具/網絡應用程序的登錄頁或主頁上使用。這些會立即引起人們的注意,并給來訪者留下持久的印象。此外,它們都是100%純CSS和超級容易調整。

      4.像素字母表

      這種獨特的動畫像素效果絕對是奇怪的,但奇怪的是令人著迷。它主要依賴于JavaScript,是由開發人員georginikoloff創建的HTML5畫布元素

      它使用 襯線音符將字母轉換為畫布元素內的可延展元素。JavaScript將字母分解成更小的點,這些點將構成動畫的基礎。

      我不能說這會有多大的實際用途,但它證明了網絡動畫已經走了多遠。

      5.打字轉盤

      這種效應在小型投資組合和機構網站上非常流行。打字文本動畫通常出現在網站的標題中,它模仿了在文字處理器中打字的人的樣子。

      所有的東西都包含在一個元素中,并且很好地混合了CSS和JavaScript動畫。有時候你會看到網站用這個來列出他們工作的描述,或者他們的歷史,或者他們曾經合作過的客戶。

      這絕對是一個有趣的效果使用適度. 因為一次只能看到一個單詞,這確實限制了頁面的可讀性,但是如果使用得少,這是一個非??岬男Ч?,任何人都可以復制。

      6.大腿大腿

      借用威廉·布萊克的詩《泰格》,約瑟夫·馬圖奇的這部非常獨特的動畫確實吸引了你的注意力。

      這里的重點不是內容,而是排版風格和動畫。文本的每個“段”都有自己的樣式,具有文本輪廓和發光效果。這是一個很好的例子,說明了如何設置主頁的樣式,從而使用setTimeout() .

      7.快照SVG

      開源快照.svg這個庫允許任何人只用一點代碼就可以創建高分辨率的SVG圖像。這比學習像Illustrator這樣的程序要容易得多,它可以讓你像這個有趣的例子由亞歷克西斯·布隆丁創作。

      所有字母都是通過JavaScript動態創建的,包括動畫中使用的隨機字符?,F代SVG支持是巨大的,這些圖像類型可以從根本上改變我們在未來幾年建立網站的方式。這個Snap.svg動畫只是一個例子,絕對是一個很酷的例子。

      8.括號動畫

      這是我經??吹降牧硪环N相當常見的文本動畫技術。它使用括號和旋轉的文本幾乎像一個rolodex在頁面上。

      這個動畫模仿了我前面提到的打字旋轉木馬效果,只是可以用CSS制作。它依賴于一個自定義循環動畫,從一個CSS關鍵幀移動到另一個CSS關鍵幀,每個幀在旋轉文本中顯示不同的單詞或短語。

      我發現這個效果更微妙,更容易在主頁上閱讀。如果你想為你的主頁尋找一些很酷的文本效果,這將是一個很好的選擇。

      9.牢不可破的金米·施密特

      這個甜美的logo效果是從Netflix系列“牢不可破的Kimmie Schmidt”中借用的。一切都是用CSS創建的,包括文本樣式和自定義動畫。

      使用一個附加到頁面的類來初始化頁面。從那里開始,一切都是純粹的CSS。它主要使用一組變換來創建令人驚訝的真實反彈效果。

      這是另一個CSS3可以做多少的例子,如果你知道的話如何使用它 .

      10.填充SVG文本

      最后,我們來看看這個非常獨特的SVG填充動畫,它混合了方框陰影和CSS筆劃屬性 .

      這個文本完全是用SVG構建的,但是它也是可選的,所以你可以像普通文本一樣復制/粘貼字母。它完全兼容所有瀏覽器,而且動畫非常精細,適合任何網站。

      所有這些文本動畫都給表格帶來了一些新的東西。在你自己的工作中,你可能不會發現它們都是實用的或有用的,但它們證明了只要采用正確的方法,幾乎任何事情都是可能的。


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      网赚团队