悬停效果一直是一个有趣的话题的探讨。在过去,我们已经建立了一些可怕的例子CSS徘徊,容易复制并粘贴到你的代码。
今天,我们要遵循了十个新的专门用于图像的影响。每个例子都带有一个HTML和CSS代码,你可以偷一个现场演示,你可以看到它在行动。
偷窥
在我们开始之前,请看下面的演示,看到所有的各种各样的悬停效果,我们将建筑。
演示: 点击这里发射。
安装程序
在我们开始创建单独的演示,一些基本的设置是必需的。这里的CSS块,我们将使用支配所有例子的基本面貌。
01
02
03
04
05
06
07
08
09
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<trans data-src="* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background
:
#333
;
}
.pic {
border
:
10px
solid
#fff
;
float
:
left
;
height
:
300px
;
width
:
300px
;
margin
:
20px
;
overflow
:
hidden
;
-webkit-box-shadow:
5px
5px
5px
#111
;
box-shadow:
5px
5px
5px
#111
;
}">* {
WebKit盒尺寸:边界盒;
-moz盒尺寸:边界盒;
MS盒尺寸:边界盒;
盒尺寸:边界盒;
}
体{
背景:#
333
;
}
。PIC {
边境:
10px
solid
# FFF;
浮动:左;
高度:
300px
;
宽度:
300px
;
保证金:
20px
;
溢出:隐藏
;</trans>
|
这是最基本的东西:盒尺寸允许我们操纵箱模型(感到自由使用更具体地说,如果你不喜欢通用选择器),和PIC课给了我们一个地方扔在一些通用的造型为一张照片。
变焦和摇摄
我们的第一组的影响,利用隐藏溢出的一些技巧。通过剪裁图像到一个div的界限,我们可以把一些很酷的徘徊。
这里的四个演示悬停效果在行动:
演示: 点击这里发射。
成长
开始的时候,我们会这样做,当用户将鼠标悬停在该图像,照片放大的同时仍保持在自己的活动范围内,导致在一个放大的影响。这里的HTML。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="grow pic">
<
img
src="http://www.odaad.com/d/file/zuoping/activity/2012-11-18/cfd4e5dcad42820f83ef58115a419eca.jpg" alt="portrait">
</
div
>"><div class=“成长的照片”>
<
img
src
=
"
"http://www.odaad.com/d/file/zuoping/activity/2012-11-18/cfd4e5dcad42820f83ef58115a419eca.jpg" alt=“肖像”"
>
</div ></
trans
>
|
正如你所看到的,我们使用“图片”类从以前一直以“成长”类。像往常一样,我们的图片是被端上的礼貌你的像素。请注意,我们这里用的图像是由400像素的400像素。现在让我们看看CSS。
CSS
01
02
03
04
05
06
07
08
09
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
38
39
40
|
<trans data-src="
/*GROW*/
.grow img {
height
:
300px
;
width
:
300px
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.grow img:hover {
width
:
400px
;
height
:
400px
;
}">*长* / /
。img {成长
高度:
300px
;
宽度:
300px
;
WebKit的过渡:所有
1
s缓解;
-moz过渡:所有
1
s缓解;
- O转换:所有
1
s缓解;
MS过渡:所有
1
s缓解;
过渡:所有
1
s缓解;
}
。</trans>
|
我们在这里做的是专门针对图像标签,设置高度为300px广场然后增加至400像素广场,当用户将鼠标悬停。再次,因为我们有溢出设置隐藏,这将导致一个放大效应。
收缩
我们已经看到了如何增加图像在盘旋,所以让我们逆转这一效应和放大照片。该方法是完全相同的,只是这一次你会开始在400像素尺寸缩小为300px在盘旋。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="shrink pic">
</
div
>"><div class=“收缩照片”>
</div ></
trans
>
|
CSS
01
02
03
04
05
06
07
08
09
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
38
39
40
|
<trans data-src="
/*SHRINK*/
.shrink img {
height
:
400px
;
width
:
400px
;
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.shrink img:hover {
width
:
300px
;
height
:
300px
;
}">/* * /
收缩。收缩img {
高度:
400
像素;
宽度:
400
像素;
WebKit的过渡:所有
1
s缓解;
-moz过渡:所有
1
s缓解;
- O转换:所有
1
s缓解;
MS过渡:所有
1
s缓解;
过渡:所有
1
s缓解;
}
。</trans>
|
侧畔
未来的效果使图像大小相同的始终,但它侧身为用户将锅。你可以看到在我们踢的例子,这是传达一种行动的一个好方法。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="sidepan pic">
</
div
>"><div class=“sidepan PIC”>
<div>/</
trans
>
|
在这里,我们使用的是一个形象的600px宽,但只有300px高。因为我们缩放横盘,我们不需要任何额外的高拔出效应。
CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*SIDEPAN*/
.sidepan img {
margin-left
:
0px
;
-webkit-transition: margin
1
s ease;
-moz-transition: margin
1
s ease;
-o-transition: margin
1
s ease;
-ms-transition: margin
1
s ease;
transition: margin
1
s ease;
}
.sidepan img:hover {
margin-left
:
-200px
;
}">sidepan * / * /
。sidepan img {
margin-left
:
0px
;
WebKit的过渡:缘
1
缓解;
-moz过渡:缘
1
缓解;
- O转换:缘
1
缓解;
MS过渡:缘
1
缓解;
过渡:缘
1
缓解
;
}
sidepan IMG。</trans>
|
为泛,我们不会改变图像的大小,像上次一样,而是使用边缘拉图像左在盘旋。如果你想向右移动,用积极的价值或保证金的权利。
立盘
立式锅可以非常好。再次,我会利用这一效应传达一种运动,但这也是伟大的交流高如果你想泛起来像一个高大的建筑物。在我们的照片有助于推动这一概念的悬崖。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="vertpan pic">
</
div
>"><div class=“vertpan PIC”>
<div>/</
trans
>
|
上次我们用了一个形象,为600px的300px,这次我们会翻转,到一张照片,是由600px 300px。
CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*VERTPAN*/
.vertpan img {
margin-top
:
0px
;
-webkit-transition: margin
1
s ease;
-moz-transition: margin
1
s ease;
-o-transition: margin
1
s ease;
-ms-transition: margin
1
s ease;
transition: margin
1
s ease;
}
.vertpan img:hover {
margin-top
:
-200px
;
}">vertpan * / * /
。vertpan img {
上边距:
0px
;
WebKit的过渡:缘
1
缓解;
-moz过渡:缘
1
缓解;
- O转换:缘
1
缓解;
MS过渡:缘
1
缓解;
过渡:缘
1
缓解
;
}
vertpan IMG。</trans>
|
因为上次相同的钻头,只有我们用边缘上而不是左边距。这将导致图像的顶部是在默认情况下,图像的底部进入视图在盘旋。
有趣的变换
我们下一节的影响是更疯狂一点。我们将从一个简单的倾斜,然后跳到一些真正独特和有趣的徘徊。
这是行动中的三大效应演示:
演示: 点击这里发射。
倾斜的
这是一个超级简单,所有我们要做的就是旋转图像略当用户将鼠标悬停在这。其结果是一个基本的但是有趣的歪挂画的幻觉。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="tilt pic">
</
div
>"><div class=“倾斜PIC”>
</div ></
trans
>
|
CSS
01
02
03
04
05
06
07
08
09
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
38
39
40
41
42
|
<trans data-src="
/*TILT*/
.tilt {
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
-ms-transition:
all
0.5
s ease;
transition:
all
0.5
s ease;
}
.tilt:hover {
-webkit-transform: rotate(
-10
deg);
-moz-transform: rotate(
-10
deg);
-o-transform: rotate(
-10
deg);
-ms-transform: rotate(
-10
deg);
transform: rotate(
-10
deg);
}">* / * /
倾斜。倾斜{
WebKit的过渡:所有
0.5
s缓解;
-moz过渡:所有
0.5
s缓解;
- O转换:所有
0.5
s缓解;
MS过渡:所有
0.5
s缓解;
过渡:所有
0.5
s缓解;
}
倾斜:悬停。{
WebKit的变换:旋转(
10
度);
-moz变换:旋转(
10
度);
- o-transform:旋转(
10
度);
MS变换</trans>
|
正如你所看到的,我们要做的就是图像旋转十度。简单而有效!请注意,这一次,我们的目标是类本身,而不是图像。
变形
这是哪里来的疯狂。上面的图像并不真的这一正义,一定要查看演示。现在的情况就是,当用户将鼠标悬停,图像开始旋转。当它旋转时,它的变种,由方形变成了圆形。其结果是超好玩。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="morph pic">
</
div
>"><div class=“变身PIC”>
<div>/</
trans
>
|
CSS
01
02
03
04
05
06
07
08
09
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
38
39
40
41
42
43
44
|
<trans data-src="
/*MORPH*/
.morph {
-webkit-transition:
all
0.5
s ease;
-moz-transition:
all
0.5
s ease;
-o-transition:
all
0.5
s ease;
-ms-transition:
all
0.5
s ease;
transition:
all
0.5
s ease;
}
.morph:hover {
border-radius:
50%
;
-webkit-transform: rotate(
360
deg);
-moz-transform: rotate(
360
deg);
-o-transform: rotate(
360
deg);
-ms-transform: rotate(
360
deg);
transform: rotate(
360
deg);
}">/*型* /
。变身{
WebKit的过渡:所有
0.5
s缓解;
-moz过渡:所有
0.5
s缓解;
- O转换:所有
0.5
s缓解;
MS过渡:所有
0.5
s缓解;
过渡:所有
0.5
s缓解;
}
形态:悬停。{
边界半径:
50%
;
WebKit的变换:旋转(
360
°);
-moz变换:旋转(
360
°);
- o-transform:旋转(
360
°);</trans>
|
我在这里做的是设置变形类旋转360度在盘旋。当它旋转的边界半径,将逐步上升到50%的方式,导致在一个圈。
集中注意力
这里的另一个古怪的人,利用边界半径的圆的图像。虽然这一次,我们不仅会增加边界半径也是其厚度。结合边界框,这将创建一个效果,主要集中在对图像的特定部分。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="focus pic">
</
div
>"><div class=“焦点图”>
<div>/</
trans
>
|
CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*FOCUS*/
.focus {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.focus:hover {
border
:
70px
solid
#000
;
border-radius:
50%
;
}">/*焦点* /
。焦点{
WebKit的过渡:所有
1
s缓解;
-moz过渡:所有
1
s缓解;
- O转换:所有
1
s缓解;
MS过渡:所有
1
s缓解;
过渡:所有
1
s缓解;
}
重点:悬停。{
边境:
70px
</trans>
|
我在这里所做的事是把我们的白边,把它变成一个70px黑色边界而起动半径达50%像我们一样在最后一个例子。
WebKit的过滤器
最后一组的影响是纯粹的实验。不像上面的例子,都是使用多个前缀,以确保最大的浏览器的兼容性,这些只能使用WebKit的前缀,因为目前没有其他支持的。如果你不使用Safari和Chrome,这些不会为你工作。
尽管不幸的约束,WebKit过滤器让你执行一些非常棒的影响!这是我最喜欢的一个演示三:
演示: 点击这里发射。
模糊的
我们要的是一个简单的模糊效果。长有人试图模糊像素与CSS单独和现在它可能与最终代码的一小线!
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="blur pic">
</
div
>"><div class=“模糊的照片”>
<div>/</
trans
>
|
CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<trans data-src="
/*BLUR*/
.blur img {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.blur img:hover {
-webkit-filter: blur(
5px
);
}">/*模糊* /
img {
。模糊
WebKit的过渡:所有
1
s缓解;
-moz过渡:所有
1
s缓解;
- O转换:所有
1
s缓解;
MS过渡:所有
1
s缓解;
过渡:所有
1
s缓解;
}
。模糊IMG:悬停{
</trans>
|
正如你所看到的,我们使用WebKit的过滤器属性,然后设置模糊半径为5px。这就是全部。
B & W
这一次我们将放弃所有的饱和度的图像在盘旋。用两个图像,拔出这种效果但WebKit的过滤器,我们可以把这归结于一个。
HTML
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="bw pic">
</
div
>"><div class=“黑白照片”>
</div ></
trans
>
|
CSS
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<trans data-src="
/*B&W*/
.bw {
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.bw:hover {
-webkit-filter: grayscale(
100%
);
}">B & W * / * /
。BW {
WebKit的过渡:所有
1
s缓解;
-moz过渡:所有
1
s缓解;
- O转换:所有
1
s缓解;
MS过渡:所有
1
s缓解;
过渡:
1
}
缓解;
BW:{
盘旋。</trans>
|
在这里我设置的灰度值为100%。如果你只想放弃一些饱和了,试着把这个号码。
照亮
我们最后的把戏,我们要将一张照片在默认情况下,然后让它到它的正常状态,在盘旋。这形成了一种显示效果。
1
2
3
4
5
6
7
|
<
trans
data-src="<div class="brighten pic">
</
div
>"><div class=“照亮照片”>
</div ></
trans
>
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<trans data-src="
/*DARKEN*/
.brighten img {
-webkit-filter: brightness(
-65%
);
-webkit-transition:
all
1
s ease;
-moz-transition:
all
1
s ease;
-o-transition:
all
1
s ease;
-ms-transition:
all
1
s ease;
transition:
all
1
s ease;
}
.brighten img:hover {
-webkit-filter: brightness(
0%
);
}">/*暗* /
。img {
照亮
WebKit的过滤器:亮度(
65%
);
WebKit的过渡:所有
1
s缓解;
-moz过渡:所有
1
s缓解;
- O转换:所有
1
s缓解;
MS过渡:
1
缓解;过渡:所有
1
s缓解;
}
。照亮IMG:悬停{</trans>
|
在这里,0%是定期的亮度。什么,你照亮了图像,任何低于你变暗。我们开始在65%和把它上升到0%在盘旋。
备注:英文很穷,翻译不是很细,只能勉强看哦