沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

编者按：动画今年是热门，像一场跳跃腾挪的表演，久看也不免厌倦。在这波浪潮里，有一小股设计师别出心裁，给网站加了细腻而不恼人的动画，一方面给网站添了生气，不致沉闷，一方面顺应潮流，锦上添花，实在是聪明得紧，来学习一下。

目前很多网页设计已经运用新的HTML5视频以及CSS3+JS来实现很棒的动画效果，不过我们在使用动画时也不能太弦，可以适当的并且有意义的去使用，这才不会分散网站访客的注意力。

网页设计中如何合理使用动画效果呢？

我们可以参考今天整理的20个融合细微动画的优秀网页设计作品，这些网页使用了简单并不复杂的动画效果，在拥有好看界面同时用户也不会被无关的动画而分心。

建议谷歌/火狐浏览器打开。

看到这儿的同学，偷偷放个双十二福利，设哥微信号走起：youshege

AQUATILIS EXPEDITION

使用了HTML5视频作为网页背景，视频内容为简单的波浪动画，网站整体为暗调风格，其中有个边框背景不错，可以借鉴下：）

沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

BarCamp Omaha 2014

这网站的动画仅仅是背景上的云彩，但里面的插画相当好看，so… 网页设计师还是要学习点绘画功能更好。

沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

Dragone

这个背景banner动画只是一些雨滴效果，但去能让气氛更加融合呦。

沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

The Beauty of Brewing

首屏动画和上面雨滴案例差不多，为了让情景更生动一些。此外，这网站的图片虚实技巧的使用可以多看看。

沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

Bellroy

这个网站的产品处理很特别，都给它们加上雨水、雪、冰碎来增加真实感，也能体现产品“防水防雪防沙”功效？

沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

Siberia

云雾动画用得很好，能过banner文字来做出空间感。

沙海拾贝的惊喜！20个以细腻动画取胜的优秀网页设计

总结

网站界面很好看是吧？但设计的背景设计师是花了多少心思我想就只有他们知道了。接下来的品牌网站建设，我建议同学们可以从这里获取些灵感，尝试这些使用一些细微动画美化网页，增加氛围：）

招聘风暴月来了，来看看怎么找到工作！

心血合集！你的工作就它承包了！
《毕业生求职指南！手把手帮你从零开始找到工作！》

给自己打气！来看看90后的大学生活！
《这才是大学生活！90后设计师的成长记事录》

自学时刻到，我们一起来祷告！
《超赞！设计师完全自学指南》

原文地址：line25
译文地址：shejidaren

【优设网原创文章投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量87万的人气微博@优秀网页设计，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加优秀网页设计微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：