hovermousepointer 用户体验设计已经渗透到产品的各个部分，无论是对于产品大方向的把握，还是对产品各种细节的掌控，产品设计师能够越来越轻易地设计出好用的产品。 但是产品设计师是不会甘于现状的——字体研究完了，就去优化配色，配色已被穷尽？那就捣鼓布局去！“自强不息”的设计师总会找到更优秀的设计方法。

会呼吸的文字

在使用某些网站的过程中，发现了一个很有趣的交互：鼠标悬停（mouseover、hover 事件，以下统称 hover）于文字链接后，文字颜色是“逐渐”变亮的，虽然只有那短短的 0.x 秒，但也足以引起我思考。

etao

一淘的 transition 效果。每秒33帧，录得有点偏快

这个效果有啥好？ macbook_light Macbook 关上盖子的时候，呼吸灯的效果就像一个人在睡眠时候的呼吸频率，多么安逸舒适的感觉啊。 hover 加入 transition，就像一盏呼吸灯 —— 温柔不突兀的把状态反馈给用户。

实现方法

W3C标准中对css3的transition这是样描述的：

CSS 的 transition 允许 CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值。

后来在捣鼓一个 WordPress 主题的时候，被我发现了这个效果的实现方法，代码例子如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
a {

color: #49aca5;

text-decoration: none;

transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-webkit-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

}

a:hover {

color: inherit;

transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-webkit-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

}

渐变的意义

代码里面的 0.4s 是代表 transition-duration，是用来指定元素转换过程的持续时间。一般持续时间不需要太长，大概只需0.2-0.3s，为了避免出现「粘滞感」，最好不超 0.5s。 至于我博客设置的是 0.4s，则因为博客是提供阅读的媒介，需要缓和的气氛与场景，慢节奏的呼吸效果更贴合这个使用场景。 suerb.com_ahover 一淘没设置鼠标移移出效果，后来发现大部分使用了这效果的网站都这样，可能是因为用户 hover 链接后，都会点击，而不会专心看到鼠标移开后的效果吧。 而我就决定在自己博客代码里面加上了鼠标移开效果（代码如上），其实就是复制多一次而已。 为啥呢？我不希望只有「吸」而没有「呼」，想让这个过程更柔和，更合理；而且我本身就是一个喜欢鼠标跟随阅读视线走的人，因此鼠标在链接上游走时会有蜻蜓点水般的效果，比生硬地「闪走」不知优雅多少倍。

会跳舞的图片

了解文字链的 transition 效果后，紧接着就是 transform，因此很自然就想到了另外一个 hover 效果——上浮效果，我真不知该怎么起名，请原谅……反正很难用言语来表达，请看图 suerb.com_imghover 感觉如何？这样做有很好的隐喻效果：在现实世界中，当一个物体能够被凌空提起，它的下方必定会有阴影，悬停图片后就有一个上浮效果，说明这个图片可以点击并“提起来”放大观看。 当然「被提起」的幅度（阴影值）可以再优化。 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
article.post .content-inner img {

-webkit-transition: all 0.5s ease 0s;

-moz-transition: all 0.5s ease 0s;

-o-transition: all 0.5s ease 0s;

}

article.post .content-inner img:hover {

-webkit-transition: all 0.5s ease 0s;

-moz-transition: all 0.5s ease 0s;

-o-transition: all 0.5s ease 0s;

-moz-transform: translate(-2px,-2px);

-webkit-transform: translate(-2px,-2px);

-o-transform: translate(-2px,-2px);

-ms-transform: translate(-2px, -2px);

transform: translate(-2px,-2px);

-webkit-box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

-moz-box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

-o-box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

box-shadow: 5px 5px 15px rgba(67, 72, 84, 0.5);

}

越来越多的网站都采用了这个效果。当然也有其他有趣的效果。

tumblr

tumblr的功能导航

总结

在CSS3越来越普及的情况下，将会出现更多有趣、贴心的交互效果，没有做不到，只有想不到啊。 就在为本文做最后修改的时候，Smashing Magazine新上了一篇强文《Designing For Emotion With Hover Effects》，本文想阐述的主旨跟对方的应该大致相同，当然对方更详细和深入，有兴趣的同学可以去看看。 题图：Dribbble 转载请注明出处: 文章来源：make it simple 作者：Suer