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

現在構建一個HTML和CSS的動畫logo比以前容易多了，配合更新的JavaScript庫可以進一步推動網絡動畫的發展。

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

1、 Flowers SVG

Web上最熱門的動畫趨勢是 SVG annimation ，它將越來越活人，這個 花標志 動畫是SVG在行動上的一個很好的例子。

Logo的圖標和文字已在HTML中的<svg>中創建，動畫的順序通過CSS和自動的pageload機制控制。這需要一些SVG特定的CSS屬性，如 stroke-dashoffset ，它按順序推動輪廓運動來創建這個神奇的動畫效果。

2、 Carbon LDP

Carbon LDP logo是相當詳細和復雜的，但開發人員David McFeders把他的 動畫Carbon logo 建立在CSS/Compass上。

每一塊這樣的代碼都很容易從標志尺寸到動畫速度進行自定義，它依賴于純CSS，使循環無止境。即使每個字母由單個PNG圖像組成，您也可以使用自己自定義的字體反向設計該設計。

3、 Binary Lab

Binary Lab's 動畫logo 是這個列表中比較復雜的動畫效果之一。它從瓶子的上方拉取數字，并且查看瓶子里對應的數字進行相應的褪色。

動畫本身是通過CSS控制的，但這支筆還依賴于 TweenMax庫 添加重復數字和自定義alpha轉換。所有的一切都非常有創意的使用了CSS和JavaScript的現代網絡動畫。

4、 Pure CSS3 Stack Overflow

Stack Overflow logo是我最喜歡的logo之一，因為它非常簡單，但易于識別。并且這個 片段動畫 Stack logo圖標只使用 純CSS3 。

這是迄今為止我見過的最令人印象深刻的純CSS動畫之一，最終產生的logo看起來很像官方的logo，動畫在每個主流瀏覽器中展示起來都很 流暢 。任何一個喜歡純CSS/CSS3動畫的工程師都會喜歡上這個片段。

5、 Monster Energy Logos

Tim Pietrusky的這一系列動畫 Monster Energy logos 使用SVG和間隔適中的CSS transitions來實現。如果你想對你的logo也進行類似的褪色效果，你可以自由學習和復制他的代碼。

這個logo的所有動畫定時直接通過Sass控制，所以這是一個純CSS動畫。你可以通過改變變量來改變速度、淡化顏色，或者其他任何東西。

6、 Subvisual

Subvisual有一個非常獨特的logo，由Miguel Palhas實現動畫效果。它由logo文本和 S 圖標組成。

Logo的一切都是建立于SVG元素上，使操作更容易。雖然絕大多數的動畫是通過CSS完成的，但這支筆還依賴于 TweenLite庫 的JavaScript。這是一個優雅的效果，可以根據用戶動作（懸停，點擊等）重復或觸發動畫效果。

7、 Pixel Logo Animation

Jura允許任何開發人員使用自由像素字體創建自定義像素逐動畫效果，這正是CodePen用戶Khaosmuhaha在 cpdepen 中使用的。

它使用 HTML canvas 元素操作純文本，動畫由CSS3 animation 屬性提供，但它們通過jQuery控制，這使得我們能夠順序操作動畫。

這是結合使用canvas元素和webfont的一個很酷的效果。

8、 Alex Aloia Logo

如果你正在尋找一個真正復雜的logo動畫，那么你可以看看開發者Alex Aloia寫的這個 示例 。使用他的名字作為名稱，他創建了一個復雜的SVG形狀系列，使用 繪圖 效果動畫。

使用CSS不能實現整個效果，它需要一些JavaScript轉換庫，如 DrawSVG 和更流行的 D3.js ，使用開源庫來創建這種獨一無二的動畫是一件很有趣的事情。

9、 Bayleys

Bayleys logo是一個晦澀復雜的動畫效果，但它確實有堅實的邊緣，使重新創建的標志容易得像餡餅。

Rafael Contreras的動畫片段只使用了38行代碼。logo本身是使用SVG元素創建的，動畫將相應地操作這些標簽。很多logo元素在不同的方向移動使得這些logo的動畫效果令人著迷。

10、 Nintendo Switch

任天堂的最新游戲的控制臺帶有一個輝煌的logo動畫，他所有的商業廣告和這個示例都由 Koto Furumiya創建。

Koto使用SVG重新構建任天堂開關logo，同時使用CSS動畫化整個事物。你會相信這個動畫效果只需要50行CSS代碼嗎？

我最贊賞這個logo動畫的真實性，它真的匹配任天堂的動畫，示例logo可以看出，它能夠強有力的下推和反彈回來。

總結

所有這些例子都是免費、開源的，你可以根據自己的項目研究、克隆和操作。我希望你喜歡這些演示，如果你正在尋找更多的CSS動畫例子，你可以看看這個 集合 ，看看其他人做了什么。

 

 

來自：https://segmentfault.com/a/1190000008600261