想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。
给平淡的站点带来活力
hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。
向上跳跃
这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。
这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置margin，当hover时，给相应的图片减少margin的值，这样就实现了向上跳跃的效果。
这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。
效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.ex
1
img{
border
:
5px
solid
#ccc
;
float
:
left
;
margin
:
15px
;
-webkit-transition: margin
0.5
s ease-out;
-moz-transition: margin
0.5
s ease-out;
-o-transition: margin
0.5
s ease-out;
}
.ex
1
img:hover {
margin-top
:
2px
;
}
|
层叠与放大
这种效果类似于熔岩灯效果，当鼠标从上至下移动时，每个图片都是慢慢地放大然后恢复到原始的状态。
为了实现这样的效果，首先把原始图片显示的时候缩小一点，当鼠标hover时，放大图片的尺寸。
因为图片是居中显示的，所以当鼠标hover时，也增加了图片的margin，这样使得当图片放大时也是居中的效果。
CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*Example 2*/
#container {
width
:
300px
;
margin
:
0
auto
;
}
#ex
2
img{
height
:
100px
;
width
:
300px
;
margin
:
15px
0
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
}
#ex
2
img:hover {
height
:
133px
;
width
:
400px
;
margin-left
:
-50px
;
}
|
文字淡入
类似的这种效果，一般是用JavaScript来实现的，当hover其中某个元素时，另一个元素发生一些变化。本例为了实现这一效果，首先把图片和文字放在一个div里，然后设置div的color：transparent和line-height:0px。当hover时，更改color和line-height属性，使得文字显示。
CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#ex
3
{
width
:
730px
;
height
:
133px
;
line-height
:
0px
;
color
:
transparent
;
font-size
:
50px
;
font-family
:
"HelveticaNeue-Light"
,
"Helvetica Neue Light"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
300
;
text-transform
:
uppercase
;
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
}
#ex
3:
hover {
line-height
:
133px
;
color
:
#575858
;
}
#ex
3
img{
float
:
left
;
margin
:
0
15px
;
}
|
旋转的图片
实现这个效果是非常容易的，但是因为这是一个非常重要的效果，尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分，transition是为了让效果更平滑。
CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#ex
4
{
width
:
800px
;
margin
:
0
auto
;
}
#ex
4
img {
margin
:
20px
;
border
:
5px
solid
#eee
;
-webkit-box-shadow:
4px
4px
4px
rgba(
0
,
0
,
0
,
0.2
);
-moz-box-shadow:
4px
4px
4px
rgba(
0
,
0
,
0
,
0.2
);
box-shadow:
4px
4px
4px
rgba(
0
,
0
,
0
,
0.2
);
-webkit-transition:
all
0.5
s ease-out;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
}
#ex
4
img:hover {
-webkit-transform: rotate(
-7
deg);
-moz-transform: rotate(
-7
deg);
-o-transform: rotate(
-7
deg);
}
|
淡入和倒影
这个效果是相对复杂的效果，首先，设置减少图片的初始的透明度，当hover时，把透明度设置回默认值，另外会有一个图片边缘发光的效果和倒影效果（只在以Webkit为内核的浏览器中起作用）。
如果你对倒影效果不太懂的话，可以参考这篇文章（Image Reflections with CSS）
CSS代码
|
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
|
#ex
5
{
width
:
700px
;
margin
:
0
auto
;
min-height
:
300px
;
}
#ex
5
img {
margin
:
25px
;
opacity:
0.8
;
border
:
10px
solid
#eee
;
/*Transition*/
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
/*Reflection*/
-webkit-box-reflect:
below
0px
-webkit-gradient(linear,
left
top
,
left
bottom
, from(
transparent
), color-stop(.
7
,
transparent
), to(rgba(
0
,
0
,
0
,
0.1
)));
}
#ex
5
img:hover {
opacity:
1
;
/*Reflection*/
-webkit-box-reflect:
below
0px
-webkit-gradient(linear,
left
top
,
left
bottom
, from(
transparent
), color-stop(.
7
,
transparent
), to(rgba(
0
,
0
,
0
,
0.4
)));
/*Glow*/
-webkit-box-shadow:
0px
0px
20px
rgba(
255
,
255
,
255
,
0.8
);
-moz-box-shadow:
0px
0px
20px
rgba(
255
,
255
,
255
,
0.8
);
box-shadow:
0px
0px
20px
rgba(
255
,
255
,
255
,
0.8
);
}
|
总结
经过测试，这些效果在以Webkit为核心的浏览器上表现最出色，Mozilla次之，IE最差，如果要使得在IE9中的效果更好，则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果，应该会给你带来一些设计上的灵感，你可以综合运用这些CSS样式，并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果，欢迎参与讨论。
编注
以上的五种CSS Hover效果都应用了最新的CSS3效果，在现代的浏览器中，应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9，IE9不支持transition和transform这两种效果，使得这五种效果在IE9下表现的不佳，寄希望于IE10吧。
文章编译来源（5 Cool CSS Hover Effects You Can Copy and Paste）
原文地址:https://www.cnblogs.com/powertoolsteam/archive/2011/05/10/2042142.html
想在自己的网站中应用超酷的hover效果吗？也许你可以从如下的这些实例中获得一些灵感，如果你喜欢这些效果，也可以直接拷贝代码并应用到你的站点。
给平淡的站点带来活力
hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。
向上跳跃
这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。
这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置margin，当hover时，给相应的图片减少margin的值，这样就实现了向上跳跃的效果。
这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。
效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。
CSS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.ex
1
img{
border
:
5px
solid
#ccc
;
float
:
left
;
margin
:
15px
;
-webkit-transition: margin
0.5
s ease-out;
-moz-transition: margin
0.5
s ease-out;
-o-transition: margin
0.5
s ease-out;
}
.ex
1
img:hover {
margin-top
:
2px
;
}
|
层叠与放大
这种效果类似于熔岩灯效果，当鼠标从上至下移动时，每个图片都是慢慢地放大然后恢复到原始的状态。
为了实现这样的效果，首先把原始图片显示的时候缩小一点，当鼠标hover时，放大图片的尺寸。
因为图片是居中显示的，所以当鼠标hover时，也增加了图片的margin，这样使得当图片放大时也是居中的效果。
CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*Example 2*/
#container {
width
:
300px
;
margin
:
0
auto
;
}
#ex
2
img{
height
:
100px
;
width
:
300px
;
margin
:
15px
0
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
}
#ex
2
img:hover {
height
:
133px
;
width
:
400px
;
margin-left
:
-50px
;
}
|
文字淡入
类似的这种效果，一般是用JavaScript来实现的，当hover其中某个元素时，另一个元素发生一些变化。本例为了实现这一效果，首先把图片和文字放在一个div里，然后设置div的color：transparent和line-height:0px。当hover时，更改color和line-height属性，使得文字显示。
CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#ex
3
{
width
:
730px
;
height
:
133px
;
line-height
:
0px
;
color
:
transparent
;
font-size
:
50px
;
font-family
:
"HelveticaNeue-Light"
,
"Helvetica Neue Light"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
font-weight
:
300
;
text-transform
:
uppercase
;
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
}
#ex
3:
hover {
line-height
:
133px
;
color
:
#575858
;
}
#ex
3
img{
float
:
left
;
margin
:
0
15px
;
}
|
旋转的图片
实现这个效果是非常容易的，但是因为这是一个非常重要的效果，尤其对于画廊中的缩略图。这个效果中我们使用了一些较新的CSS样式。这个例子使用了box-shadows,transitions和transforms。transform是实现旋转部分，transition是为了让效果更平滑。
CSS代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
#ex
4
{
width
:
800px
;
margin
:
0
auto
;
}
#ex
4
img {
margin
:
20px
;
border
:
5px
solid
#eee
;
-webkit-box-shadow:
4px
4px
4px
rgba(
0
,
0
,
0
,
0.2
);
-moz-box-shadow:
4px
4px
4px
rgba(
0
,
0
,
0
,
0.2
);
box-shadow:
4px
4px
4px
rgba(
0
,
0
,
0
,
0.2
);
-webkit-transition:
all
0.5
s ease-out;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
}
#ex
4
img:hover {
-webkit-transform: rotate(
-7
deg);
-moz-transform: rotate(
-7
deg);
-o-transform: rotate(
-7
deg);
}
|
淡入和倒影
这个效果是相对复杂的效果，首先，设置减少图片的初始的透明度，当hover时，把透明度设置回默认值，另外会有一个图片边缘发光的效果和倒影效果（只在以Webkit为内核的浏览器中起作用）。
如果你对倒影效果不太懂的话，可以参考这篇文章（Image Reflections with CSS）
CSS代码
|
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
|
#ex
5
{
width
:
700px
;
margin
:
0
auto
;
min-height
:
300px
;
}
#ex
5
img {
margin
:
25px
;
opacity:
0.8
;
border
:
10px
solid
#eee
;
/*Transition*/
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
/*Reflection*/
-webkit-box-reflect:
below
0px
-webkit-gradient(linear,
left
top
,
left
bottom
, from(
transparent
), color-stop(.
7
,
transparent
), to(rgba(
0
,
0
,
0
,
0.1
)));
}
#ex
5
img:hover {
opacity:
1
;
/*Reflection*/
-webkit-box-reflect:
below
0px
-webkit-gradient(linear,
left
top
,
left
bottom
, from(
transparent
), color-stop(.
7
,
transparent
), to(rgba(
0
,
0
,
0
,
0.4
)));
/*Glow*/
-webkit-box-shadow:
0px
0px
20px
rgba(
255
,
255
,
255
,
0.8
);
-moz-box-shadow:
0px
0px
20px
rgba(
255
,
255
,
255
,
0.8
);
box-shadow:
0px
0px
20px
rgba(
255
,
255
,
255
,
0.8
);
}
|
总结
经过测试，这些效果在以Webkit为核心的浏览器上表现最出色，Mozilla次之，IE最差，如果要使得在IE9中的效果更好，则需要其它的第三方JS库。以上的这五个纯CSS实现的hover效果，应该会给你带来一些设计上的灵感，你可以综合运用这些CSS样式，并加入一些其他的CSS来产生一些有意思的效果。如果你也有一些非常酷的CSS效果，欢迎参与讨论。
编注
以上的五种CSS Hover效果都应用了最新的CSS3效果，在现代的浏览器中，应用这些CSS能展现出非常漂亮的效果。值得一提的是IE9，IE9不支持transition和transform这两种效果，使得这五种效果在IE9下表现的不佳，寄希望于IE10吧。
文章编译来源（5 Cool CSS Hover Effects You Can Copy and Paste）
原文地址:https://www.cnblogs.com/powertoolsteam/archive/2011/05/10/2042142.html