摘要：任天堂的最新游戲的控制臺(tái)帶有一個(gè)輝煌的動(dòng)畫，他所有的商業(yè)廣告和這個(gè)示例都由創(chuàng)建。使用重新構(gòu)建任天堂開關(guān)，同時(shí)使用動(dòng)畫化整個(gè)事物。

現(xiàn)在構(gòu)建一個(gè)HTML和CSS的動(dòng)畫logo比以前容易多了，配合更新的JavaScript庫可以進(jìn)一步推動(dòng)網(wǎng)絡(luò)動(dòng)畫的發(fā)展。

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

Web上最熱門的動(dòng)畫趨勢(shì)是SVG annimation，它將越來越火熱，這個(gè)花標(biāo)志動(dòng)畫是SVG在行動(dòng)上的一個(gè)很好的例子。
Logo的圖標(biāo)和文字已在HTML中的stroke-dashoffset，它按順序推動(dòng)輪廓運(yùn)動(dòng)來創(chuàng)建這個(gè)神奇的動(dòng)畫效果。

Carbon LDPlogo是相當(dāng)詳細(xì)和復(fù)雜的，但開發(fā)人員David McFeders把他的動(dòng)畫Carbon logo建立在CSS/Compass上。
每一塊這樣的代碼都很容易從標(biāo)志尺寸到動(dòng)畫速度進(jìn)行自定義，它依賴于純CSS，使循環(huán)無止境。即使每個(gè)字母由單個(gè)PNG圖像組成，您也可以使用自己自定義的字體反向設(shè)計(jì)該設(shè)計(jì)。

Binary Lab"s動(dòng)畫logo是這個(gè)列表中比較復(fù)雜的動(dòng)畫效果之一。它從瓶子的上方拉取數(shù)字，并且查看瓶子里對(duì)應(yīng)的數(shù)字進(jìn)行相應(yīng)的褪色。
動(dòng)畫本身是通過CSS控制的，但這支筆還依賴于TweenMax庫添加重復(fù)數(shù)字和自定義alpha轉(zhuǎn)換。所有的一切都非常有創(chuàng)意的使用了CSS和JavaScript的現(xiàn)代網(wǎng)絡(luò)動(dòng)畫。

Stack Overflow logo是我最喜歡的logo之一，因?yàn)樗浅：?jiǎn)單，但易于識(shí)別。并且這個(gè)片段動(dòng)畫Stack logo圖標(biāo)只使用純CSS3。
這是迄今為止我見過的最令人印象深刻的純CSS動(dòng)畫之一，最終產(chǎn)生的logo看起來很像官方的logo，動(dòng)畫在每個(gè)主流瀏覽器中展示起來都很流暢。任何一個(gè)喜歡純CSS/CSS3動(dòng)畫的工程師都會(huì)喜歡上這個(gè)片段。

Tim Pietrusky的這一系列動(dòng)畫Monster Energy logos使用SVG和間隔適中的CSS transitions來實(shí)現(xiàn)。如果你想對(duì)你的logo也進(jìn)行類似的褪色效果，你可以自由學(xué)習(xí)和復(fù)制他的代碼。
這個(gè)logo的所有動(dòng)畫定時(shí)直接通過Sass控制，所以這是一個(gè)純CSS動(dòng)畫。你可以通過改變變量來改變速度、淡化顏色，或者其他任何東西。

Subvisual有一個(gè)非常獨(dú)特的logo，由Miguel Palhas實(shí)現(xiàn)動(dòng)畫效果。它由logo文本和S圖標(biāo)組成。
Logo的一切都是建立于SVG元素上，使操作更容易。雖然絕大多數(shù)的動(dòng)畫是通過CSS完成的，但這支筆還依賴于TweenLite庫的JavaScript。這是一個(gè)優(yōu)雅的效果，可以根據(jù)用戶動(dòng)作（懸停，點(diǎn)擊等）重復(fù)或觸發(fā)動(dòng)畫效果。

Jura允許任何開發(fā)人員使用自由像素字體創(chuàng)建自定義像素逐動(dòng)畫效果，這正是CodePen用戶Khaosmuhaha在cpdepen中使用的。
它使用HTML canvas元素操作純文本，動(dòng)畫由CSS3 animation 屬性提供，但它們通過jQuery控制，這使得我們能夠順序操作動(dòng)畫。
這是結(jié)合使用canvas元素和webfont的一個(gè)很酷的效果。

如果你正在尋找一個(gè)真正復(fù)雜的logo動(dòng)畫，那么你可以看看開發(fā)者Alex Aloia寫的這個(gè)示例。使用他的名字作為名稱，他創(chuàng)建了一個(gè)復(fù)雜的SVG形狀系列，使用繪圖效果動(dòng)畫。
使用CSS不能實(shí)現(xiàn)整個(gè)效果，它需要一些JavaScript轉(zhuǎn)換庫，如DrawSVG和更流行的D3.js，使用開源庫來創(chuàng)建這種獨(dú)一無二的動(dòng)畫是一件很有趣的事情。

Bayleys logo是一個(gè)晦澀復(fù)雜的動(dòng)畫效果，但它確實(shí)有堅(jiān)實(shí)的邊緣，使重新創(chuàng)建的標(biāo)志容易得像餡餅。
Rafael Contreras的動(dòng)畫片段只使用了38行代碼。logo本身是使用SVG元素創(chuàng)建的，動(dòng)畫將相應(yīng)地操作這些標(biāo)簽。很多l(xiāng)ogo元素在不同的方向移動(dòng)使得這些logo的動(dòng)畫效果令人著迷。

任天堂的最新游戲的控制臺(tái)帶有一個(gè)輝煌的logo動(dòng)畫，他所有的商業(yè)廣告和這個(gè)示例都由 Koto Furumiya創(chuàng)建。
Koto使用SVG重新構(gòu)建任天堂開關(guān)logo，同時(shí)使用CSS動(dòng)畫化整個(gè)事物。你會(huì)相信這個(gè)動(dòng)畫效果只需要50行CSS代碼嗎？
我最贊賞這個(gè)logo動(dòng)畫的真實(shí)性，它真的匹配任天堂的動(dòng)畫，示例logo可以看出，它能夠強(qiáng)有力的下推和反彈回來。

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

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