10 個優質的 CSS與JS LOGO 動畫示例

10 個優質的 CSS 與 JS LOGO 動畫示例

利用 HTML 和 CSS 製作 LOGO 動畫要比以前更容易，通過使用最新的 JavaScript 庫也能夠使網頁動畫製作的更加精良。

在本文中，我們將與大家分享 10 個讓人印象深刻的世界知名品牌與未知實體的自定義 LOGO 動畫示例。一起來 Enjoy 吧！

1. Flowers SVG

GIF/67K

SVG 動畫 作為網上最熱門的動畫趨勢之一，備受大家的關注。而 這個花的 LOGO 動畫 便是一個很好的 SVG 動畫示例。

我們可以看到，此 LOGO 的圖標和文字在 標籤內編寫，通過 CSS 來控制動畫，並可以自動的完成頁面的載入。當然，需要一些 SVG 特定的 CSS 屬性支持，例如 stroke-dashoffset （譯者：表示虛線的起始偏移），它會按順序來推動輪廓的運動，進而實現了精美的動畫效果。

2. Carbon LDP

GIF/345K

Carbon LDP 的 LOGO 動畫相當的複雜。但是開發者 David McFeders 通過 CSS/Compass 實現了 Carbon 的 LOGO 動畫 ，從而也提升了它的逼格。

無論是 LOGO 的大小，還是動畫的速度都很容易設置。它由純 CSS 實現，並保持著無限的循環。雖然，LOGO 的字母是一張 PNG 圖片，但你也可以隨時利用自己設計的字體進行逆向工程。

3. Binary Lab

GIF/154K

Binary Lab 的 LOGO 動畫 同樣是本文中比較複雜的動畫效果之一。我們可以看到它的效果：從燒瓶里拉出的數字，在 LOGO 的上方不斷的消失。

動畫效果是由 CSS 控制的。同時，這個作品依賴了 TweenMax 庫 來添加重複的數字，並完成自定義的 alpha 轉換。作者很有創意的利用 CSS 與 JS 實現了這個酷炫的 Web 動畫效果。

4. Pure CSS3 Stack Overflow

GIF/72K

Stack Overflow 的 LOGO 是我最喜歡的 LOGO 之一，因為它的設計不僅簡單，而且易識別。而 這個作品 僅用 CSS3 將 Stack Overflow 的 LOGO 進行了動畫效果的實現。

這是迄今為止我看到的最令人印象深刻的純 CSS 動畫之一。最終的展現也與官方的 LOGO 很搭，同時在主流瀏覽器中 動畫都可以流暢的運行 。相信，任何喜歡 CSS / SCSS 動畫的朋友都會喜歡上這個作品。

5. Monster Energy Logos

GIF/901K

這個作品是由 Tim Pietrusky 利用 SVG 和均勻的 CSS 轉換實現的怪物能量 LOGO 系列動畫 。如果你也打算在 LOGO 上實現淡入淡出的特效，就可以複製他的代碼來學習。

它是一款純 CSS 實現的動畫，所有的動畫時間都是由 SCSS 直接進行調控。同時，你也可以通過更改變數來調節動畫的速度，淡化顏色。

6. Subvisual

GIF/144K

Subvisual 團隊擁有非常獨特的 LOGO，而開發者 Miguel Palhas 則賦予了它酷炫的 動畫 效果。你會發現構成它的動畫效果有兩個因素，即 LOGO 的文字和「 S 」形圖標。

作品是基於 SVG 元素構成的，也使操縱更簡單。雖然作品中的大多數動畫都是基於 CSS 編寫的，但它也依賴 JavaScript 庫： TweenLite 。同時，這個作品可以根據用戶的操作來重複或觸發動畫效果。（懸停、點擊等）

7. Pixel Logo Animation

GIF/20K

通過使用免費的像素字體，任何開發人員都可以製作出自定義的像素動畫。而 這個作品 就是由 CodePen 的用戶 Khaosmuhaha 所製作的。

他通過 HTML Canvas 元素進行純文本的操作，動畫效果則是由 CSS3 的 animation 屬性進行驅動，而 jQuery 則控制了全部。所以，我們所見的連續像素動畫就這樣實現了。

顯然，這是一個利用 Canvas 元素與 webfont 構成的炫酷的作品。

8. Alex Aloia LOGO

GIF/92K

如果你正在尋找一個真正複雜的 LOGO 動畫，可以看看開發者 Alex Aloia 製作的 這個示例 。在作品中，作者使用了他的名字作為品牌名稱，並將一系列複雜的 SVG 形狀通過繪圖的動畫效果展現出來。

作品的整體效果只通過 CSS 來實現是不太可能的，還需要一些 JS 庫 （ DrawSVG 和更流行的 D3.js ）的支持。但是，利用開源庫來實現這種獨一無二的動畫，還是非常有趣的。

9. Bayleys

GIF/263K

Bayleys 的 LOGO 動畫的選擇，有些令人費解。但 LOGO 厚實的邊緣使重製變得易如反掌。開發者 Rafael Contreras 僅通過 38 行代碼便實現了 動畫 效果。

LOGO 是基於 SVG 標籤製作的，動畫效果則是操縱相應的標籤來實現。而在不同的方向移動的眾多 LOGO 元素，使動畫令人著迷。

10. Nintendo Switch

GIF/19K

這是來自任天堂最新款遊戲機的一個 LOGO 動畫。而開發者 Koto Furumiya 在 CodePen 上實現了它們廣告片中的 動畫 效果。

Koto 使用 SVG 重製了任天堂 Switch 的 LOGO，並用 CSS 實現了它的動畫效果。你會相信這個動畫只需要 50 行的 CSS 代碼嗎？

另外，不得不提這個動畫效果確實很逼真。強有力的下推與反彈回升效果，確實與任天堂 Switch 的開機動畫相吻合。

最後

今天分享的所有示例都是免費與開源的，希望你能將它們應用在你自己的項目上。同時，也希望你能喜歡這些 Demos。如果你正在尋找更多關於 CSS 動畫的示例，也可以了解下這個 合輯 。

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！