20個(gè)以細(xì)膩動(dòng)畫取勝的優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)

目前很多網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)運(yùn)用新的HTML5視頻以及CSS3+JS來(lái)實(shí)現(xiàn)很棒的動(dòng)畫效果，不過(guò)我們?cè)谑褂脛?dòng)畫時(shí)也不能太弦，可以適當(dāng)?shù)牟⑶矣幸饬x的去使用，這才不會(huì)分散網(wǎng)站訪客的注意力。

　　網(wǎng)頁(yè)設(shè)計(jì)中如何合理使用動(dòng)畫效果呢?

　　我們可以參考圖趣網(wǎng)整理的20個(gè)融合細(xì)微動(dòng)畫的優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)作品，這些網(wǎng)頁(yè)使用了簡(jiǎn)單并不復(fù)雜的動(dòng)畫效果，在擁有好看界面同時(shí)用戶也不會(huì)被無(wú)關(guān)的動(dòng)畫而分心。建議谷歌/火狐瀏覽器打開(kāi)。

　　AQUATILIS EXPEDITION

　　使用了HTML5視頻作為網(wǎng)頁(yè)背景，視頻內(nèi)容為簡(jiǎn)單的波浪動(dòng)畫，網(wǎng)站整體為暗調(diào)風(fēng)格，其中有個(gè)邊框背景不錯(cuò)，可以借鑒下：)

　　Little Forge

　　BarCamp Omaha 2014

　　這網(wǎng)站的動(dòng)畫僅僅是背景上的云彩，但里面的插畫相當(dāng)好看，so… 網(wǎng)頁(yè)設(shè)計(jì)師還是要學(xué)習(xí)點(diǎn)繪畫功能更好。

　　WILD

　　Nerisson

　　Dragone

　　這個(gè)背景banner動(dòng)畫只是一些雨滴效果，但去能讓氣氛更加融合呦。

　　Blu Homes

　　LETTERS, INC.

　　Omnisense

　　INDUSTRY

　　雪山?哪就為它加雪吧!

　　The Beauty of Brewing

　　首屏動(dòng)畫和上面雨滴案例差不多，為了讓情景更生動(dòng)一些。此外，這網(wǎng)站的圖片虛實(shí)技巧的使用可以多看看。

　　Bicycle Speed Shop

　　Thermodo

　　Bellroy

　　這個(gè)網(wǎng)站的產(chǎn)品處理很特別，都給它們加上雨水、雪、冰碎來(lái)增加真實(shí)感，也能體現(xiàn)產(chǎn)品“防水防雪防沙”功效?

　　Siberia

　　云霧動(dòng)畫用得很好，能過(guò)banner文字來(lái)做出空間感。

　　Carbure Digital Workshop

　　里面的圖標(biāo)可以用鼠標(biāo)拖動(dòng)……

　　The Fernway

　　High Tide

　　有高潮，才HIGH，不是嗎?

　　總結(jié)

　　網(wǎng)站界面很好看是吧?但設(shè)計(jì)的背景設(shè)計(jì)師是花了多少心思我想就只有他們知道了。接下來(lái)的品牌網(wǎng)站建設(shè)，我建議同學(xué)們可以從這里獲取些靈感，嘗試這些使用一些細(xì)微動(dòng)畫美化網(wǎng)頁(yè)，增加氛圍：)