[譯]10個驚人的CSS和JavaScript動畫logos例子

如今構建一個HTML和CSS的動畫logo比之前容易多了，配合更新的JavaScript庫能夠進一步推進網絡動畫的發展。

看看這個畫廊的10個使人難以置信的自定義動畫logo，它們展現的是一些未知的實體或者世界知名品牌。

一、Flowers SVG

Web上最熱門的動畫趨勢是SVG annimation，它將愈來愈火熱，這個花標誌動畫是SVG在行動上的一個很好的例子。
Logo的圖標和文字已在HTML中的<svg>中建立，動畫的順序經過CSS和自動的pageload機制控制。這須要一些SVG特定的CSS屬性，如stroke-dashoffset，它按順序推進輪廓運動來建立這個神奇的動畫效果。

二、 Carbon LDP

Carbon LDPlogo是至關詳細和複雜的，但開發人員David McFeders把他的動畫Carbon logo創建在CSS/Compass上。
每一塊這樣的代碼都很容易從標誌尺寸到動畫速度進行自定義，它依賴於純CSS，使循環無止境。即便每一個字母由單個PNG圖像組成，您也可使用本身自定義的字體反向設計該設計。

三、Binary Lab

Binary Lab's動畫logo是這個列表中比較複雜的動畫效果之一。它從瓶子的上方拉取數字，而且查看瓶子裏對應的數字進行相應的褪色。
動畫自己是經過CSS控制的，但這支筆還依賴於TweenMax庫添加劇複數字和自定義alpha轉換。全部的一切都很是有創意的使用了CSS和JavaScript的現代網絡動畫。

四、Pure CSS3 Stack Overflow

Stack Overflow logo是我最喜歡的logo之一，由於它很是簡單，但易於識別。而且這個片斷動畫Stack logo圖標只使用純CSS3。
這是迄今爲止我見過的最使人印象深入的純CSS動畫之一，最終產生的logo看起來很像官方的logo，動畫在每一個主流瀏覽器中展現起來都很流暢。任何一個喜歡純CSS/CSS3動畫的工程師都會喜歡上這個片斷。

五、Monster Energy Logos

Tim Pietrusky的這一系列動畫Monster Energy logos使用SVG和間隔適中的CSS transitions來實現。若是你想對你的logo也進行相似的褪色效果，你能夠自由學習和複製他的代碼。
這個logo的全部動畫定時直接經過Sass控制，因此這是一個純CSS動畫。你能夠經過改變變量來改變速度、淡化顏色，或者其餘任何東西。

六、Subvisual

Subvisual有一個很是獨特的logo，由Miguel Palhas實現動畫效果。它由logo文本和S圖標組成。
Logo的一切都是創建於SVG元素上，使操做更容易。雖然絕大多數的動畫是經過CSS完成的，但這支筆還依賴於TweenLite庫的JavaScript。這是一個優雅的效果，能夠根據用戶動做（懸停，點擊等）重複或觸發動畫效果。

七、Pixel Logo Animation

Jura容許任何開發人員使用自由像素字體建立自定義像素逐動畫效果，這正是CodePen用戶Khaosmuhaha在cpdepen中使用的。
它使用HTML canvas元素操做純文本，動畫由CSS3 animation 屬性提供，但它們經過jQuery控制，這使得咱們可以順序操做動畫。
這是結合使用canvas元素和webfont的一個很酷的效果。

八、 Alex Aloia Logo

若是你正在尋找一個真正複雜的logo動畫，那麼你能夠看看開發者Alex Aloia寫的這個示例。使用他的名字做爲名稱，他建立了一個複雜的SVG形狀系列，使用繪圖效果動畫。
使用CSS不能實現整個效果，它須要一些JavaScript轉換庫，如DrawSVG和更流行的D3.js，使用開源庫來建立這種獨一無二的動畫是一件頗有趣的事情。

九、Bayleys

Bayleys logo是一個晦澀複雜的動畫效果，但它確實有堅實的邊緣，使從新建立的標誌容易得像餡餅。
Rafael Contreras的動畫片斷只使用了38行代碼。logo自己是使用SVG元素建立的，動畫將相應地操做這些標籤。不少logo元素在不一樣的方向移動使得這些logo的動畫效果使人着迷。

十、Nintendo Switch

任天堂的最新遊戲的控制檯帶有一個輝煌的logo動畫，他全部的商業廣告和這個示例都由 Koto Furumiya建立。
Koto使用SVG從新構建任天堂開關logo，同時使用CSS動畫化整個事物。你會相信這個動畫效果只須要50行CSS代碼嗎？
我最讚揚這個logo動畫的真實性，它真的匹配任天堂的動畫，示例logo能夠看出，它可以強有力的下推和反彈回來。

總結

全部這些例子都是免費、開源的，你能夠根據本身的項目研究、克隆和操做。我但願你喜歡這些演示，若是你正在尋找更多的CSS動畫例子，你能夠看看這個集合，看看其餘人作了什麼。

原文連接 10 Amazing Examples of CSS & JavaScript Animated Logos