編者按：動(dòng)畫(huà)今年是熱門(mén)，像一場(chǎng)跳躍騰挪的表演，久看也不免厭倦。在這波浪潮里，有一小股設(shè)計(jì)師別出心裁，給網(wǎng)站加了細(xì)膩而不惱人的動(dòng)畫(huà)，一方面給網(wǎng)站添了生氣，不致沉悶，一方面順應(yīng)潮流，錦上添花，實(shí)在是聰明得緊，來(lái)學(xué)習(xí)一下。

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

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

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

建議谷歌/火狐瀏覽器打開(kāi)。

看到這兒的同學(xué)，偷偷放個(gè)雙十二福利，設(shè)哥微信號(hào)走起：youshege

AQUATILIS EXPEDITION

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

Little Forge

BarCamp Omaha 2014

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

WILD

Nerisson

Dragone

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

Blu Homes

LETTERS, INC.

Omnisense

INDUSTRY

雪山？哪就為它加雪吧！

The Beauty of Brewing

首屏動(dòng)畫(huà)和上面雨滴案例差不多，為了讓情景更生動(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)畫(huà)用得很好，能過(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)畫(huà)美化網(wǎng)頁(yè)，增加氛圍：）

招聘風(fēng)暴月來(lái)了，來(lái)看看怎么找到工作！

心血合集！你的工作就它承包了！
《畢業(yè)生求職指南！手把手幫你從零開(kāi)始找到工作！》

給自己打氣！來(lái)看看90后的大學(xué)生活！
《這才是大學(xué)生活！90后設(shè)計(jì)師的成長(zhǎng)記事錄》

自學(xué)時(shí)刻到，我們一起來(lái)禱告！
《超贊！設(shè)計(jì)師完全自學(xué)指南》

原文地址：line25
譯文地址：shejidaren

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量87萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：