一、鼠标悬停效果
无效果
HTML
1
2
3
| <div>
<img src="image.jpg" />
</div>
|
CSS
1
2
3
4
5
6
7
8
| div{
width: 300px;
height: 200px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
}
|
放大#1
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
|
放大#2
1
2
3
4
5
6
7
8
9
| div img {
width: 300px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
width: 350px;
}
|
缩小#1
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-transform: scale(1);
transform: scale(1);
}
|
缩小#2
1
2
3
4
5
6
7
8
9
| div img {
width: 400px;
height: auto;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
width: 300px;
}
|
滑动
如果要使用的图像宽度大于“要显示的区域+要滑动的距离”，则scale无需指定。
1
2
3
4
5
6
7
8
9
10
| div img {
margin-left: 30px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
margin-left: 0;
}
|
旋转（+缩小）
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-transform: rotate(15deg) scale(1.4);
transform: rotate(15deg) scale(1.4);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
|
模糊
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-filter: blur(3px);
filter: blur(3px);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-filter: blur(0);
filter: blur(0);
}
|
灰度
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
|
棕褐色
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-filter: sepia(0);
filter: sepia(0);
}
|
模糊+灰度
1
2
3
4
5
6
7
8
9
10
| div img {
-webkit-filter: grayscale(0) blur(0);
filter: grayscale(0) blur(0);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
-webkit-filter: grayscale(100%) blur(3px);
filter: grayscale(100%) blur(3px);
}
|
不透明度#1
1
2
3
4
5
6
7
8
| div img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
opacity: .5;
}
|
不透明度#2
1
2
3
4
5
6
7
8
9
10
11
| div {
background: #1abc9c;
}
div img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
div:hover img {
opacity: .5;
}
|
闪烁
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| div:hover img {
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
|
闪耀
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
| div {
position: relative;
}
div::before {
position: absolute;
top: 0;
left: -75%;
z-index: 2;
display: block;
content: '';
width: 50%;
height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
div:hover::before {
-webkit-animation: shine .75s;
animation: shine .75s;
}
@-webkit-keyframes shine {
100% {
left: 125%;
}
}
@keyframes shine {
100% {
left: 125%;
}
}
|
光圈
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
38
39
40
41
42
43
44
45
46
47
48
| div {
position: relative;
}
div::before {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: block;
content: '';
width: 0;
height: 0;
background: rgba(255,255,255,.2);
border-radius: 100%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
}
div:hover::before {
-webkit-animation: circle .75s;
animation: circle .75s;
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
|
二、CSS3混合模式
css3的混合模式类似于PS中的混合模式，使用：mix-blend-mode 和 background-blend-mode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| mix-blend-mode: normal; // 正常
mix-blend-mode: multiply; // 正片叠底
mix-blend-mode: screen; // 滤色
mix-blend-mode: overlay; // 叠加
mix-blend-mode: darken; // 变暗
mix-blend-mode: lighten; // 变亮
mix-blend-mode: color-dodge; // 颜色减淡
mix-blend-mode: color-burn; // 颜色加深
mix-blend-mode: hard-light; // 强光
mix-blend-mode: soft-light; // 柔光
mix-blend-mode: difference; // 差值
mix-blend-mode: exclusion; // 排除
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 颜色
mix-blend-mode: luminosity; // 亮度
mix-blend-mode: initial; // 默认
mix-blend-mode: inherit; // 继承
mix-blend-mode: unset; // 还原
|
参考：
悬停效果：https://www.nxworld.net/tips/css-image-hover-effects.html
CSS3混合模式：https://www.jianshu.com/p/d2ee896a3d15
