悬停效果之 text-shadow

本文将专注于使用 CSS text-shadow 属性来实现有趣的鼠标悬停效果,但是实际上并不会为这些文本制作任何文本阴影效果。

text-shadow 语法
1
text-shadow: h-shadow v-shadow blur color;
参数 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

text-shadow 为文字添加阴影,而且可以添加多个阴影,用逗号分隔。若我们将 blur 属性设置为 0 或不设置,那么就可以得到清晰的文本,然后可以通过 h-shadow,v-shadow 调整位置,color 调整颜色。


悬停效果1

https//imgblogcsdnimgcn/imgconvert/0acf872befc1cd0a491f3cb7a7a9ff7fgif

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
<h3 class="hover-1">1. Hover Me</h3>

<style>
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
.hover-1 {
line-height: 1.2em;
color: #0000;
text-shadow:
0 0 #000,
0 1.2em #1095c1;
overflow: hidden;
transition: .3s;
}
.hover-1:hover {
text-shadow:
0 -1.2em #000,
0 0 #1095c1;
}
</style>

将文字颜色设为透明(#0000),然后生成两个阴影,黑色阴影在原文字位置,用来代替显示文字,蓝色阴影在下方,由于 overflow: hidden 不可见。

当 hover 时,将两个阴影的位置向上调整,加上过渡,就呈现出上图的样子。


悬停效果2

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
<h3 class="hover-2">2. Hover Me</h3>

<style>
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin:0;
cursor: pointer;
padding: 0 .1em;
}
.hover-2 {
line-height: 1.2em;
color: #0000;
text-shadow:
0 0 #000,
0 1.2em #fff;
overflow: hidden;
background:
linear-gradient(#1095c1, #1095c1)
bottom/100% 0 no-repeat;
transition: .3s;
}
.hover-2:hover {
text-shadow: 0 0 #fff;
background-size: 100% 100%
}
</style>

与悬停效果一相比多了背景颜色的变化。通过改变背景色的 height 来实现以上效果。


悬停效果3

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
<h3 class="hover-3">3. Hover Me</h3>


<style>
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin-bottom: 20px;
cursor: pointer;
padding: 0 .1em;
}
.hover-3 {
line-height: 1.2em;
color: #0000;
overflow: hidden;
text-shadow:
0 0 #1095c1,
0 1.2em #fff;
background:
linear-gradient(#1095c1, #1095c1) no-repeat
200% 100% / 200% 0.08em;
transition: .3s, background-position .3s .3s;
}
.hover-3:hover {
text-shadow: 0 -1.2em #1095c1, 0 0 #ffffff;
background-position: 100% 100%;
background-size: 100% 100%;
transition: .3s .3s, background-position .3s;
}

</style>

这个和悬停效果二类似,只不过增加了一个前置动画,两个动画的实现分别通过改变 background-position 和 background-size 实现,先后顺序是通过 transition 的 delay 属性实现的。


悬停效果4

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
<h3 class="hover-4">4. Hover Me</h3>

<style>
h3 {
font-family: system-ui, sans-serif;
font-size: 3rem;
margin-bottom: 20px;
cursor: pointer;
padding: 0 .1em;
}
.hover-4 {
line-height: 1.2em;
color: #0000;
text-shadow: 0 0 #000, 0 1.2em #ffffff;
box-shadow: 0 1.2em #1095c1;
clip-path: inset(0 0 0 0);
background: linear-gradient(#1095c1, #1095c1) 0 1.2em/100% 100% no-repeat;
transition: .4s, clip-path .4s .4s;
}
.hover-4:hover {
text-shadow: 0 0 #ffffff;
box-shadow: 0 0 #1095c1;
clip-path: inset(0 0 -1.2em 0);
background-position: 0 0;
transition: .4s .4s, clip-path .4s;
}
</style>

这里用到了 clip-path 属性。

clip-path

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。可以指定一些特定形状,比如:polygon 多边形、circle 圆形、ellipse 椭圆、inset 等。

1
2
3
4
5
6
7
8
9
10
11
/* 相对于容器的坐标点(水平方向,垂直方向) */
clip-path: polygon(50% 0px, 100% 100%, 0px 100%)

/* 半径以及圆心所在坐标 */
clip-path: circle(50% at 50% 50%)

/* x 轴半径,y 轴半径,圆心 */
clip-path: ellipse(30% 20% at 50% 50%)

/* 上 下 左 右 round 左上角radius 右上角radius 右下角radius 左下角raduis */
clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)

这里的 box-shadow 没有设置 blur,它的作用是提供一个与容器大小相同的带有背景颜色的投影。