8个最佳动效网页设计，告别枯燥体验！
作为 2018 年网页规划的趋势之一，网页动效规划已经成为现代网页用户体会的重要组成部分。不管是奇妙的转场动效，还是掩盖整个页面，动画作用无处不在。融入动效的交互细节让现代网页同以往的规划在根本上区别开来。
对规划师来说，CSS和HTML的成熟使规划师变得越来越赋有构思，CSS动画使他们的网站愈加个性，能够快速，轻松地解说杂乱的想法，并指导用户的行动。关于用户而言，动画作用让网页中元素的逻辑改动愈加清晰，个性化的视觉作用为用户带来的愉悦感触更有助于用户留存、增加转化。
什么是CSS动画？
经过 CSS3，咱们能够创建动画，无需运用处理器和需要大量内存的JavaScript或Flash。能够更改的CSS属性的数量或频率没有约束。经过为动画指定关键帧来启动CSS动画。
今日摹客团队为大家整理了一些国外十分优秀的带有动画作用的网页规划案例。这些网站运用动画来展现产品和服务，展现品牌风格，发明情绪，乃至引导用户阅读故事。
1. Your Plan, Your Planet
https://yourplanyourplanet.sustainability.google/
规划师：MediaMonks
动效特征：
悬停动效
引导动效
讲故事动效
Your Plan, Your Planet是由荷兰MediaMonks公司制作的关于可继续未来规划的动效网页著作。首页导航规划以水、食物、能量等日子元素为主，鼠标滑动挑选不同的元素的规划技巧，与悬停动效的结合，让整个页面规划十分赋有构思和规划感。等距插图的运用让打造可继续未来的规划变得生动风趣。同时，咱们也能够看到资料规划更风趣的方面。
每个日子元素的动画作用规划和UX文案都十分赋有故事性和引导性，和用户的每一次互动都会产生不同的结果，每一步操作都在传播环保和可继续发展的理念，是一个寓教于乐的动画网页规划。
2. Species in Pieces
http://www.species-in-pieces.com/
规划师：Byan James
动效特征：
过渡动效
微动效
这是一个基于CSS的交互式动效网页规划，它运用仅三角形片段展现了 30 个世界上最风趣但不幸濒临灭绝的物种 – 它们以碎片化的方法，幸存于文字。一切的三角碎片在每次过渡动画中转变成不同的颜色，组成不同的物种。每个动物都配有一个统计图表，以直观的方法展现了它们的进化史以及逐年锐减的物种数量。规划师经过JavaScript和CSS将一切的过渡动作和SVG形状联络起来，制作成这样一个宣传物种保护的网站，希望能为这些物种生存做出自己的尽力，也引发人类的考虑。
3. New Tactics - Sneak Peak
https://dribbble.com/shots/5269419-New-Tactics-Sneak-Peak
摹客iDoc，更快更简略的产品协作规划神器
规划师：Quintin Lodge
动效特征：
HTML5 动效
数据动效
这个案例中运用到HTML5 动画规划。奇妙的渐变色网页规划在纯色背景中运用的适可而止。显连线的渐变色规划和实时交互规划让深色背景的网页更有活力。页面中的信息图标可切换到不同的形式对数据进行打开和缩放作用展现。那么，初见这个页面的时分，你可能会问自己“我在看什么？”。
实际上这是两个版本的战术地图，旨在帮助解决侵略人权的问题。第一个视图是问题的地形或全体健康状况的地图。第二个是衔接视图，它说明了与此违规行为和地图上其他参与者相关的个人的性质和影响。在第二个视图中衔接线条的颜色和动画点表明这些联络的性质以及权利或影响力。
4. Miki Mottes
http://www.mikimottes.com/
规划师：Miki Mottes.
动效特征：
排版动效
滚动触发起效
加载动效
这是一个十分有意思的插画风格的著作集动效网页规划。当然，这跟作者自己是插画家，动画师和规划师有很大的联络。所以，这个风趣的网站是创作者风格的完美展现。假如你想学习经过增加一些部分动画盘活整个网页的规划，这就是一个很好的比如。
出色的导航栏规划也能够提供良好的用户体会。悬浮导航栏的滚动作用运用户在访问网站的时分逻辑更清晰，循序渐进。假如你有时刻仔细阅读网页，细节动画的作用也很风趣。是个别具风格的动效网页规划著作。
5. Genesis
https://eatgenesis.com/
规划师：Sam Day
动效特征：
滚动触发起效
悬停微交互
假如只看首页规划，你可能认为Genesis仅仅只是一副插画著作，但却很难将它与食物和餐厅联络起来。其实，Genesis是一个提倡素食，专心于快速休闲餐饮和有机舒适食品的网站。网页规划特征之一是手电筒光标。随着鼠标的滑动，所到区域将以高亮显示。单页规划、鼠标悬停微交互规划和滚动触发起画作用的结合运用，使得整个网站赋有神秘色彩。运用户感到猎奇，也是一种吸引用户的方法。
6. KIKK Festival
https://www.kikk.be/2018/en/home
规划师：DOGSTUDIO
动效特征：
悬停动效
鼠标动效
微交互
KIKK是一个文明教育类的网页，经过鼠标的移动路径展现蓝色蒙板下真实的网页背景色。喷涂作用的光标作用很有构思，网页中还增加了一些风趣的游标作用和心爱的小插画，与游动的鼠标产生奇妙的微交互。
7. Onedesigncompany
https://onedesigncompany.com/
规划师：Onedesigncompany
动效特征：
微交互
加载动效
讲故事动效
在网页规划中运用动画的好处清楚明了，使网页愈加生动。但这也使等候和加载的时刻变长。那么在等候过程中为进度条加上赋有构思的加载动画会改动用户关于时刻的感知，经过转移注意力的方法让用户等候感下降。简略的加载动效比杂乱的更好。UX文案以叙说的方法推进微交互动画展现，也是网页规划中常用的一种动效展现方法。
8. Marie Morelle
https://www.marie-morelle.com/
规划师：Marie Morelle
动效特征：
HTML5 动效
导航栏滚动作用
鼠标动效
这是一个插画风格的著作集网站，极具法国特征的插画与HTML5 动画网页规划的奇妙结合使网站很有吸引力。右侧导航栏随着鼠标滚动切换页面，伴随的页面交互在简练规划的背景下显得很有规划感。
