利用 HTML 和 CSS 制作 LOGO 動畫要比以前更容易唠雕，通過使用最新的 JavaScript 庫也能夠使網(wǎng)頁動畫制作的更加精良志珍。
在本文中，我們將與大家分享 10 個讓人印象深刻的世界知名品牌與未知實體的自定義 LOGO 動畫示例叹侄。一起來 Enjoy 吧艺沼！
- Flowers SVG
--
SVG 動畫作為網(wǎng)上最熱門的動畫趨勢之一胰舆，備受大家的關(guān)注骚露。而這個花的 LOGO 動畫便是一個很好的 SVG 動畫示例。
我們可以看到缚窿，此 LOGO 的圖標和文字在<svg>標簽內(nèi)編寫棘幸，通過 CSS 來控制動畫，并可以自動的完成頁面的加載倦零。當然够话，需要一些 SVG 特定的 CSS 屬性支持蓝翰，例如stroke-dashoffset（譯者：表示虛線的起始偏移），它會按順序來推動輪廓的運動女嘲，進而實現(xiàn)了精美的動畫效果畜份。
- Carbon LDP
--
Carbon LDP 的 LOGO 動畫相當?shù)膹碗s。但是開發(fā)者 David McFeders 通過 CSS/Compass 實現(xiàn)了 Carbon 的 LOGO 動畫欣尼，從而也提升了它的逼格爆雹。
無論是 LOGO 的大小，還是動畫的速度都很容易設(shè)置愕鼓。它由純 CSS 實現(xiàn)钙态，并保持著無限的循環(huán)。雖然菇晃，LOGO 的字母是一張 PNG 圖片册倒，但你也可以隨時利用自己設(shè)計的字體進行逆向工程。
- Binary Lab
--
Binary Lab 的 LOGO 動畫同樣是本文中比較復雜的動畫效果之一磺送。我們可以看到它的效果：從燒瓶里拉出的數(shù)字驻子，在 LOGO 的上方不斷的消失。
動畫效果是由 CSS 控制的估灿。同時崇呵，這個作品依賴了 TweenMax 庫來添加重復的數(shù)字，并完成自定義的 alpha 轉(zhuǎn)換馅袁。作者很有創(chuàng)意的利用 CSS 與 JS 實現(xiàn)了這個酷炫的 Web 動畫效果域慷。
- Pure CSS3 Stack Overflow
--
Stack Overflow 的 LOGO 是我最喜歡的 LOGO 之一，因為它的設(shè)計不僅簡單汗销，而且易識別犹褒。而這個作品僅用 CSS3 將 Stack Overflow 的 LOGO 進行了動畫效果的實現(xiàn)。
這是迄今為止我看到的最令人印象深刻的純 CSS 動畫之一弛针。最終的展現(xiàn)也與官方的 LOGO 很搭化漆，同時在主流瀏覽器中動畫都可以流暢的運行。相信钦奋，任何喜歡 CSS / SCSS 動畫的朋友都會喜歡上這個作品。
- Monster Energy Logos
--
這個作品是由 Tim Pietrusky 利用 SVG 和均勻的 CSS 轉(zhuǎn)換實現(xiàn)的怪物能量 LOGO 系列動畫疙赠。如果你也打算在 LOGO 上實現(xiàn)淡入淡出的特效付材，就可以復制他的代碼來學習。
它是一款純 CSS 實現(xiàn)的動畫圃阳，所有的動畫時間都是由 SCSS 直接進行調(diào)控厌衔。同時，你也可以通過更改變量來調(diào)節(jié)動畫的速度捍岳，淡化顏色富寿。
- Subvisual
--
Subvisual 團隊擁有非常獨特的 LOGO睬隶，而開發(fā)者 Miguel Palhas 則賦予了它酷炫的動畫效果。你會發(fā)現(xiàn)構(gòu)成它的動畫效果有兩個因素页徐，即 LOGO 的文字和“ S ”形圖標苏潜。
作品是基于 SVG 元素構(gòu)成的，也使操縱更簡單变勇。雖然作品中的大多數(shù)動畫都是基于 CSS 編寫的恤左，但它也依賴 JavaScript 庫：TweenLite。同時搀绣，這個作品可以根據(jù)用戶的操作來重復或觸發(fā)動畫效果飞袋。（懸停、點擊等）
- Pixel Logo Animation
--
通過使用免費的像素字體链患，任何開發(fā)人員都可以制作出自定義的像素動畫巧鸭。而這個作品就是由 CodePen 的用戶 Khaosmuhaha 所制作的。
他通過 HTML Canvas 元素進行純文本的操作麻捻，動畫效果則是由 CSS3 的 animation 屬性進行驅(qū)動纲仍，而 jQuery 則控制了全部。所以芯肤，我們所見的連續(xù)像素動畫就這樣實現(xiàn)了巷折。
顯然，這是一個利用 Canvas 元素與 webfont 構(gòu)成的炫酷的作品崖咨。
- Alex Aloia LOGO
--
如果你正在尋找一個真正復雜的 LOGO 動畫锻拘，可以看看開發(fā)者 Alex Aloia 制作的這個示例。在作品中击蹲，作者使用了他的名字作為品牌名稱署拟，并將一系列復雜的 SVG 形狀通過繪圖的動畫效果展現(xiàn)出來。
作品的整體效果只通過 CSS 來實現(xiàn)是不太可能的歌豺，還需要一些 JS 庫 （DrawSVG 和更流行的 D3.js）的支持推穷。但是，利用開源庫來實現(xiàn)這種獨一無二的動畫类咧，還是非常有趣的馒铃。
- Bayleys
--
Bayleys 的 LOGO 動畫的選擇，有些令人費解痕惋。但 LOGO 厚實的邊緣使重制變得易如反掌区宇。開發(fā)者 Rafael Contreras 僅通過 38 行代碼便實現(xiàn)了動畫效果。
LOGO 是基于 SVG 標簽制作的值戳，動畫效果則是操縱相應(yīng)的標簽來實現(xiàn)议谷。而在不同的方向移動的眾多 LOGO 元素，使動畫令人著迷堕虹。
- Nintendo Switch
--
這是來自任天堂最新款游戲機的一個 LOGO 動畫卧晓。而開發(fā)者 Koto Furumiya 在 CodePen 上實現(xiàn)了它們廣告片中的動畫效果芬首。
Koto 使用 SVG 重制了任天堂 Switch 的 LOGO，并用 CSS 實現(xiàn)了它的動畫效果逼裆。你會相信這個動畫只需要 50 行的 CSS 代碼嗎郁稍？
另外，不得不提這個動畫效果確實很逼真波附。強有力的下推與反彈回升效果艺晴，確實與任天堂 Switch 的開機動畫相吻合。
最后
今天分享的所有示例都是免費與開源的掸屡，希望你能將它們應(yīng)用在你自己的項目上封寞。同時，也希望你能喜歡這些 Demos仅财。如果你正在尋找更多關(guān)于 CSS 動畫的示例狈究，也可以了解下這個合輯。
感謝你的閱讀盏求。
注：
- 本文版權(quán)歸原作者所有抖锥，僅用于學習與交流。
- 如需轉(zhuǎn)載譯文碎罚，煩請按下方注明出處信息磅废，謝謝！
英文原文：10 Amazing Examples of CSS & JavaScript Animated Logos
作者：Jake Rocheleau
譯者：IT程序獅
譯文地址：http://www.reibang.com/p/b204e854a942
