10 個優質的 CSS 與 JS LOGO 動畫示例
10 個優質的 CSS 與 JS LOGO 動畫示例
利用 HTML 和 CSS 制作 LOGO 動畫要比以前更容易，通過使用最新的 JavaScript 庫也能夠使網頁動畫制作的更加精良。
在本文中，我們將與大家分享 10 個讓人印象深刻的世界知名品牌與未知實體的自定義 LOGO 動畫示例。一起來 Enjoy 吧！
1. Flowers SVG
SVG 動畫 作為網上最熱門的動畫趨勢之一，備受大家的關注。而 這個花的 LOGO 動畫 便是一個很好的 SVG 動畫示例。
我們可以看到，此 LOGO 的圖標和文字在 <svg> 標簽內編寫，通過 CSS 來控制動畫，并可以自動的完成頁面的加載。當然，需要一些 SVG 特定的 CSS 屬性支持，例如 stroke-dashoffset （譯者：表示虛線的起始偏移），它會按順序來推動輪廓的運動，進而實現了精美的動畫效果。
2. Carbon LDP
Carbon LDP 的 LOGO 動畫相當的復雜。但是開發者 David McFeders 通過 CSS/Compass 實現了 Carbon 的 LOGO 動畫 ，從而也提升了它的逼格。
無論是 LOGO 的大小，還是動畫的速度都很容易設置。它由純 CSS 實現，并保持著無限的循環。雖然，LOGO 的字母是一張 PNG 圖片，但你也可以隨時利用自己設計的字體進行逆向工程。
3. Binary Lab
Binary Lab 的 LOGO 動畫 同樣是本文中比較復雜的動畫效果之一。我們可以看到它的效果：從燒瓶里拉出的數字，在 LOGO 的上方不斷的消失。
動畫效果是由 CSS 控制的。同時，這個作品依賴了 TweenMax 庫 來添加重復的數字，并完成自定義的 alpha 轉換。作者很有創意的利用 CSS 與 JS 實現了這個酷炫的 Web 動畫效果。
4. Pure CSS3 Stack Overflow
Stack Overflow 的 LOGO 是我最喜歡的 LOGO 之一，因為它的設計不僅簡單，而且易識別。而 這個作品 僅用 CSS3 將 Stack Overflow 的 LOGO 進行了動畫效果的實現。
這是迄今為止我看到的最令人印象深刻的純 CSS 動畫之一。最終的展現也與官方的 LOGO 很搭，同時在主流瀏覽器中 動畫都可以流暢的運行 。相信，任何喜歡 CSS / SCSS 動畫的朋友都會喜歡上這個作品。
5. Monster Energy Logos
這個作品是由 Tim Pietrusky 利用 SVG 和均勻的 CSS 轉換實現的怪物能量 LOGO 系列動畫 。如果你也打算在 LOGO 上實現淡入淡出的特效，就可以復制他的代碼來學習。
它是一款純 CSS 實現的動畫，所有的動畫時間都是由 SCSS 直接進行調控。同時，你也可以通過更改變量來調節動畫的速度，淡化顏色。
6. Subvisual
Subvisual 團隊擁有非常獨特的 LOGO，而開發者 Miguel Palhas 則賦予了它酷炫的 動畫 效果。你會發現構成它的動畫效果有兩個因素，即 LOGO 的文字和“ S ”形圖標。
作品是基于 SVG 元素構成的，也使操縱更簡單。雖然作品中的大多數動畫都是基于 CSS 編寫的，但它也依賴 JavaScript 庫： TweenLite 。同時，這個作品可以根據用戶的操作來重復或觸發動畫效果。（懸停、點擊等）
7. Pixel Logo Animation
通過使用免費的像素字體，任何開發人員都可以制作出自定義的像素動畫。而 這個作品 就是由 CodePen 的用戶 Khaosmuhaha 所制作的。
他通過 HTML Canvas 元素進行純文本的操作，動畫效果則是由 CSS3 的 animation 屬性進行驅動，而 jQuery 則控制了全部。所以，我們所見的連續像素動畫就這樣實現了。
顯然，這是一個利用 Canvas 元素與 webfont 構成的炫酷的作品。
8. Alex Aloia LOGO
如果你正在尋找一個真正復雜的 LOGO 動畫，可以看看開發者 Alex Aloia 制作的 這個示例 。在作品中，作者使用了他的名字作為品牌名稱，并將一系列復雜的 SVG 形狀通過繪圖的動畫效果展現出來。
作品的整體效果只通過 CSS 來實現是不太可能的，還需要一些 JS 庫 （ DrawSVG 和更流行的 D3.js ）的支持。但是，利用開源庫來實現這種獨一無二的動畫，還是非常有趣的。
9. Bayleys
Bayleys 的 LOGO 動畫的選擇，有些令人費解。但 LOGO 厚實的邊緣使重制變得易如反掌。開發者 Rafael Contreras 僅通過 38 行代碼便實現了 動畫 效果。
LOGO 是基于 SVG 標簽制作的，動畫效果則是操縱相應的標簽來實現。而在不同的方向移動的眾多 LOGO 元素，使動畫令人著迷。
10. Nintendo Switch
這是來自任天堂最新款游戲機的一個 LOGO 動畫。而開發者 Koto Furumiya 在 CodePen 上實現了它們廣告片中的 動畫 效果。
Koto 使用 SVG 重制了任天堂 Switch 的 LOGO，并用 CSS 實現了它的動畫效果。你會相信這個動畫只需要 50 行的 CSS 代碼嗎？
另外，不得不提這個動畫效果確實很逼真。強有力的下推與反彈回升效果，確實與任天堂 Switch 的開機動畫相吻合。
最后
今天分享的所有示例都是免費與開源的，希望你能將它們應用在你自己的項目上。同時，也希望你能喜歡這些 Demos。如果你正在尋找更多關于 CSS 動畫的示例，也可以了解下這個 合輯 。
感謝你的閱讀。
注：
- 本文版權歸原作者所有，僅用于學習與交流。
- 如需轉載譯文，煩請按下方注明出處信息，謝謝！
來自：http://www.jianshu.com/p/b204e854a942