10個(gè)超贊的動(dòng)畫LOGO設(shè)計(jì)賞析

強(qiáng)列建議可以關(guān)注如下10個(gè)令人過(guò)目難忘的logo動(dòng)畫效果合集。

1. Flowers SVG

SVG動(dòng)畫(SVG animation)算是Web端最熱門的動(dòng)畫趨勢(shì)之一。 而這個(gè)花狀的LOGO動(dòng)畫算是SVG的動(dòng)畫效果中的一個(gè)很不錯(cuò)的例子。

圖標(biāo)和文字是創(chuàng)建在HTML中的標(biāo)簽內(nèi)。 然后通過(guò)CSS控制順序動(dòng)畫，并設(shè)定自動(dòng)播放。 這需要設(shè)定一些SVG特定的CSS屬性，如stroke-dashoffset，它按順序推動(dòng)輪廓運(yùn)動(dòng)來(lái)創(chuàng)建這個(gè)有趣的動(dòng)畫效果。

2. Carbon LDP

Carbon LDP logo相當(dāng)多細(xì)節(jié)且復(fù)雜， 但是開發(fā)GG David McFeders 基于CSS / Compass來(lái)實(shí)現(xiàn)了這個(gè)動(dòng)感十足的Carbon logo。

你能通過(guò)代碼輕易地自定義它的尺寸和運(yùn)動(dòng)速率, 且是循環(huán)不止地運(yùn)動(dòng)下去的。并且令人印象深刻的是這一切是純用CSS實(shí)現(xiàn)，而沒(méi)有使用到JS。 雖然字母由單個(gè)PNG圖像構(gòu)成，但你也可以使用自己的自定義字體去修改此設(shè)計(jì)。

3. Binary Lab

Binary Lab的動(dòng)畫 logo是這個(gè)列表中較為復(fù)雜的動(dòng)畫效果之一。 它會(huì)是從一個(gè)瓶子拉取出一些數(shù)字，并瓶口也即LOGO上邊漸隱消失。

動(dòng)畫本身是通過(guò)CSS控制的，但它還依賴于TweenMax庫(kù)( TweenMax library)添加重復(fù)數(shù)字和自定義透明度的轉(zhuǎn)換。 這是一個(gè)結(jié)合使用SVG，CSS和JavaScript實(shí)現(xiàn)的非常有創(chuàng)意的的現(xiàn)代網(wǎng)絡(luò)動(dòng)畫。

4. Pure CSS3 Stack Overflow

Stack Overflow 的LOGO是我最愛(ài)之一，因?yàn)樗春?jiǎn)單又識(shí)別度高。 而這個(gè)堆棧動(dòng)畫只使用了純CSS3來(lái)實(shí)現(xiàn)。

這是迄今為止我見過(guò)的最令人印象深刻的純CSS動(dòng)畫之一。 最終的輸出真的看起來(lái)像官方的標(biāo)志，而動(dòng)畫在每個(gè)主流的瀏覽器都很流暢(animation feels smooth)。相信任何人喜歡純CSS / SCSS動(dòng)畫都會(huì)喜歡這個(gè)片段。

5. Monster Energy Logos

這個(gè)Monster Energy Logo動(dòng)畫是SVG結(jié)合間隔很大的CSS過(guò)渡來(lái)動(dòng)畫來(lái)實(shí)現(xiàn)的。 如果你想對(duì)LOGO有類似的褪色效果，當(dāng)中的代碼可供學(xué)習(xí)參考。

所有的動(dòng)畫時(shí)間軸都是直接通過(guò)Sass控制，所以這也是一個(gè)純CSS動(dòng)畫。 而你可以嘗試去改變變量來(lái)調(diào)整速度，淡化的顏色或其他任何東西。

6. Subvisual

Subvisual的團(tuán)隊(duì)有一個(gè)非常獨(dú)特的動(dòng)效LOGO， 它有兩個(gè)因素：LOGO文本和“S”圖標(biāo)。

而這一切都是建立在SVG元素上的，所以能使操作更容易。雖然絕大多數(shù)動(dòng)畫是通過(guò)CSS完成的，但另外也包括有JavaScript(并依賴于TweenLite 庫(kù))。 這是一個(gè)整齊而簡(jiǎn)潔的效果，可以根據(jù)用戶動(dòng)作(懸停，點(diǎn)擊等)重復(fù)或觸發(fā)。

7. Pixel Logo Animation

這個(gè)LOGO是使用自由像素字體Jura來(lái)實(shí)現(xiàn)的像素動(dòng)畫效果。

它通過(guò)使用HTML canvas元素操作純文本。 動(dòng)畫本身是由CSS3動(dòng)畫屬性實(shí)現(xiàn)的，但也有借助jQuery控制。

這絕對(duì)是一個(gè)使用canvas元素結(jié)合webfont來(lái)實(shí)現(xiàn)的酷且有趣的范例。

8. Alex Aloia Logo

果你正在尋找一個(gè)真正的復(fù)雜的LOGO動(dòng)畫，那么可查看由開發(fā)GG Alex Aloia所創(chuàng)建的這個(gè)示例。他是使用他的名字作為L(zhǎng)OGO，創(chuàng)建了一個(gè)復(fù)雜的SVG形狀系列，并模擬“繪圖”效果創(chuàng)作的動(dòng)畫。

單純使用CSS不能實(shí)現(xiàn)整個(gè)效果，還需要一些JS轉(zhuǎn)換庫(kù)，如DrawSVG 和較流行的D3.js。而使用開源庫(kù)來(lái)創(chuàng)建這種獨(dú)一無(wú)二的動(dòng)畫是一種有趣的方式。

9. Bayleys

Bayleys LOGO 對(duì)于實(shí)現(xiàn)為動(dòng)畫效果其實(shí)算是一個(gè)晦澀的選擇。因它確實(shí)有堅(jiān)實(shí)的邊緣，使重新創(chuàng)建的LOGO很可能看起來(lái)像餡餅。

而Rafael Contreras只使用38行代碼就實(shí)現(xiàn)了這個(gè)不俗的動(dòng)畫片段。LOGO志本身是使用SVG標(biāo)簽構(gòu)建的，用CSS相關(guān)動(dòng)畫屬性操作這些標(biāo)簽。 LOGO元素在不同的方向移動(dòng)的這種效果實(shí)是令人著迷……

10. Nintendo Switch

任天堂的最新游戲控制臺(tái)帶有一個(gè)很酷的LOGO動(dòng)畫。 由Koto Furumiya創(chuàng)建。

Koto使用SVG重新構(gòu)建任天堂的”開關(guān)LOGO”，同時(shí)使用CSS動(dòng)畫控制整個(gè)事物。而整個(gè)動(dòng)畫效果只需要約50行的CSS代碼，會(huì)否讓你覺(jué)有點(diǎn)不可思議?

我確實(shí)要為這個(gè)標(biāo)志動(dòng)畫貼合真實(shí)性點(diǎn)上一贊，它的從強(qiáng)有力的下推和反彈動(dòng)效真的很恰當(dāng)?shù)卣宫F(xiàn)任天堂LOGO。

寫在最后

所有這些例子都是免費(fèi)的，開源的，供你自己的項(xiàng)目研究，克隆和操作。 我希望你喜歡這些演示，如果你剛好正在尋找類似的CSS動(dòng)畫的例子，看看這個(gè)集合，看看其他人做了什么，相信能為你帶來(lái)不錯(cuò)的收獲或靈感。