网页设计 & 灵感 » 20个融合细微动画的优秀网页设计欣赏

20个融合细微动画的优秀网页设计欣赏

发表于: 网页设计 & 灵感. 评论
Sponsor

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

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

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

AQUATILIS EXPEDITION

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

网页设计欣赏:AQUATILIS EXPEDITION
浏览网站

Little Forge

网页设计欣赏:Little Forge
浏览网站

BarCamp Omaha 2014

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

网页设计欣赏:BarCamp Omaha 2014
浏览网站

WILD

网页设计欣赏:WILD
浏览网站

Nerisson

网页设计欣赏:Nerisson
浏览网站

Dragone

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

网页设计欣赏:Dragone
浏览网站

Blu Homes

网页设计欣赏:Blu Homes
浏览网站

LETTERS, INC.

网页设计欣赏:LETTERS, INC.
浏览网站

Omnisense

网页设计欣赏:Omnisense
浏览网站

INDUSTRY

雪山?哪就为它加雪吧!

网页设计欣赏:INDUSTRY
浏览网站

The Beauty of Brewing

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

网页设计欣赏:The Beauty of Brewing
浏览网站

Bicycle Speed Shop

网页设计欣赏:Bicycle Speed Shop
浏览网站

Thermodo

网页设计欣赏:Thermodo
浏览网站

Bellroy

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

网页设计欣赏:Bellroy
浏览网站

Siberia

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

网页设计欣赏:Siberia
浏览网站

Carbure Digital Workshop

里面的图标可以用鼠标拖动……

网页设计欣赏:Carbure Digital Workshop
浏览网站

The Fernway

网页设计欣赏:The Fernway
浏览网站

High Tide

有高潮,才HIGH,不是吗?

网页设计欣赏:High Tide
浏览网站

总结

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

整理:Line25

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }