沙海拾貝的驚喜！20個以細膩動畫取勝的優秀網頁設計

編者按：動畫今年是熱門，像一場跳躍騰挪的表演，久看也不免厭倦。在這波浪潮里，有一小股設計師別出心裁，給網站加了細膩而不惱人的動畫，一方面給網站添了生氣，不致沉悶，一方面順應潮流，錦上添花，實在是聰明得緊，來學習一下。

目前很多網頁設計已經運用新的HTML5視頻以及CSS3+JS來實現很棒的動畫效果，不過我們在使用動畫時也不能太弦，可以適當的并且有意義的去使用，這才不會分散網站訪客的注意力。

網頁設計中如何合理使用動畫效果呢？

我們可以參考今天整理的20個融合細微動畫的優秀網頁設計作品，這些網頁使用了簡單并不復雜的動畫效果，在擁有好看界面同時用戶也不會被無關的動畫而分心。

建議谷歌/火狐瀏覽器打開。

看到這兒的同學，偷偷放個雙十二福利，設哥微信號走起：youshege

AQUATILIS EXPEDITION

使用了HTML5視頻作為網頁背景，視頻內容為簡單的波浪動畫，網站整體為暗調風格，其中有個邊框背景不錯，可以借鑒下：）

Little Forge

BarCamp Omaha 2014

這網站的動畫僅僅是背景上的云彩，但里面的插畫相當好看，so… 網頁設計師還是要學習點繪畫功能更好。

WILD

Nerisson

Dragone

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

Blu Homes

LETTERS, INC.

Omnisense

INDUSTRY

雪山？哪就為它加雪吧！

The Beauty of Brewing

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

Bicycle Speed Shop

Thermodo

Bellroy

這個網站的產品處理很特別，都給它們加上雨水、雪、冰碎來增加真實感，也能體現產品“防水防雪防沙”功效？

Siberia

云霧動畫用得很好，能過banner文字來做出空間感。

Carbure Digital Workshop

里面的圖標可以用鼠標拖動……

The Fernway

High Tide

有高潮，才HIGH，不是嗎？

總結

網站界面很好看是吧？但設計的背景設計師是花了多少心思我想就只有他們知道了。接下來的品牌網站建設，我建議同學們可以從這里獲取些靈感，嘗試這些使用一些細微動畫美化網頁，增加氛圍：）

招聘風暴月來了，來看看怎么找到工作！

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

給自己打氣！來看看90后的大學生活！
《這才是大學生活！90后設計師的成長記事錄》

自學時刻到，我們一起來禱告！
《超贊！設計師完全自學指南》

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

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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