文字特效
下划线
醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。
马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名，可怜白发生！
马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名，可怜白发生！
注意
通过给文字添加background 属性 和 transition 动画，实现下划线特效。hover前后的background-position属性不同，下划线的动画也不同。
div {
span {
font-size: 16px;
line-height: 30px;
background: linear-gradient(to right, #ff6b6b, #77e877);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 0 2px;
transition: background-size 1s;
}
span:last-child {
background-position: left bottom;
}
}
div:hover>span {
background-position: left bottom;
background-size: 100% 2px;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
全部代码
vue
<script setup>
</script>
<template>
<div>
<span>
醉里挑灯看剑，梦回吹角连营。八百里分麾下炙，五十弦翻塞外声，沙场秋点兵。
</span>
<br>
<span>
马作的卢飞快，弓如霹雳弦惊。了却君王天下事，赢得生前身后名，可怜白发生！
</span>
</div>
</template>
<style scoped lang="scss">
div {
span {
font-size: 16px;
line-height: 30px;
background: linear-gradient(to right, #ff6b6b, #77e877);
background-repeat: no-repeat;
background-position: right bottom;
background-size: 0 2px;
transition: background-size 1s;
}
span:last-child {
background-position: left bottom;
}
}
div:hover>span {
background-position: left bottom;
background-size: 100% 2px;
}
</style>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
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
文字颜色渐变
夫天地者万物之逆旅也 光阴者百代之过客也。
.text-clip {
display: inline-block;
padding: 30px 0 0;
color: transparent;
font-size: 20px;
font-weight: bold;
background: linear-gradient(45deg, rgba(0, 173, 181, 1) 0%, rgba(0, 173, 181, .4) 100%);
-webkit-background-clip: text;
}1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
全部代码
vue
<template>
<div class="text-clip"> 夫天地者万物之逆旅也 光阴者百代之过客也。 </div>
</template>
<style scoped lang="scss">
.text-clip {
font-size: 24px;
display: inline-block;
color: transparent;
background: linear-gradient(45deg, rgba(0, 173, 181, 1) 0%, rgba(0, 173, 181, .4) 100%);
-webkit-background-clip: text;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
文字不断渐变
《青玉案·元夕》
--辛弃疾
东风夜放花千树，更吹落、星如雨。
宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
蛾儿雪柳黄金缕，笑语盈盈暗香去。
众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。
.text-gradient {
font-size: 24px;
background: -webkit-linear-gradient(315deg, rgb(210, 86, 53) 10%, #647eff 50%, rgb(238, 224, 112) 90%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
全部代码
vue
<template>
<div class="text-gradient">
<pre>
《青玉案·元夕》
--辛弃疾
东风夜放花千树，更吹落、星如雨。
宝马雕车香满路。凤箫声动，玉壶光转，一夜鱼龙舞。
蛾儿雪柳黄金缕，笑语盈盈暗香去。
众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。
</pre>
</div>
</template>
<style scoped lang="scss">
.text-gradient {
font-size: 24px;
background: -webkit-linear-gradient(315deg, rgb(210, 86, 53) 10%, #647eff 50%, rgb(238, 224, 112) 90%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 400% 400%;
animation: gradient 10s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>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
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
文字闪烁
一闪一闪亮晶晶
.text-blink {
color: rgba(0, 173, 181, 1);
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
全部代码
vue
<template>
<div class="text-blink">一闪一闪亮晶晶</div>
</template>
<style scoped lang="scss">
.text-blink {
text-align: center;
font-size: 20px;
color: rgba(0, 173, 181, 1);
animation: blink 2s linear infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
</style>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
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
文字外发光
况阳春召我以烟景，大块假我以文章
.glow-text {
line-height: 60px;
background: #00adb5;
color: #fff;
text-align: center;
text-shadow: 0 0 0.1em, 0 0 0.3em;
}1
2
3
4
5
6
7
2
3
4
5
6
7
全部代码
vue
<template>
<div class="glow-text">况阳春召我以烟景，大块假我以文章</div>
</template>
<style scoped lang="scss">
.glow-text {
line-height: 60px;
background: #00adb5;
color: #fff;
text-align: center;
text-shadow: 0 0 0.1em, 0 0 0.3em;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
空心文字
古人秉烛夜游，良有以也
.hollow-text {
text-align: center;
line-height: 60px;
color: #fff;
text-shadow: 0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882);
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
全部代码
vue
<template>
<div class="hollow-text">古人秉烛夜游，良有以也</div>
</template>
<style scoped lang="scss">
.hollow-text {
text-align: center;
line-height: 60px;
color: #fff;
text-shadow: 0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882),
0 0 2px rgba(0, 173, 181, .2882);
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
文字模糊
而浮生若梦，为欢几何？
.text-blurry {
text-align: center;
line-height: 60px;
color: transparent;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}1
2
3
4
5
6
2
3
4
5
6
全部代码
vue
<template>
<div class="text-blurry">而浮生若梦，为欢几何？</div>
</template>
<style scoped lang="scss">
.text-blurry {
text-align: center;
line-height: 60px;
color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
文字阴影
会桃花之芳园，序天伦之乐事
.text-blurry {
text-align: center;
line-height: 60px;
color: transparent;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}1
2
3
4
5
6
2
3
4
5
6
全部代码
vue
<template>
<div class="text-shadow">会桃花之芳园，序天伦之乐事</div>
</template>
<style scoped lang="scss">
.text-shadow {
text-align: center;
color: #00adb5;
text-shadow: 1px 1px rgba(0, 173, 181, .2882),
2px 2px rgba(0, 173, 181, .2882),
3px 3px rgba(0, 173, 181, .2882),
4px 4px rgba(0, 173, 181, .2882);
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14