当艺术与代码交汇，神奇的CSS特效诞生！在这篇文章中，我为你准备了一个精彩的CSS特效合集，涵盖了各种令人惊叹的效果。从简单到复杂，每个特效都以最精简的代码实现，展示出一系列充满创意和魅力的演示。无论是动态背景渐变，还是浮动的图标按钮，抑或是引人入胜的鼠标跟随效果，本文精心呈现了让你欲罢不能的CSS神奇。
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉作为一个频繁对博客进行改进的人，我深知花里胡哨的CSS效果对于吸引读者尤为重要。在这里，我汇总了一些炫酷的CSS效果，并提供了简要的预览和实现思路，以方便那些不太熟悉的朋友也能轻松上手。同时，我会持续寻找优秀的效果，逐步添加到博客中，其中部分资源来自网络。
相信有了以下示例，很多不会css动画效果的朋友，也就会了
弹跳的圆
使用伪选择器 :before 和 :after ，并配合 animation 属性并设置 transform 变形参数，实现一个圆不停的弹跳的效果。
实现思路：
- 主体一个 div 标签
- 用伪选择器 :before 和 :after 分别画两个圆，一个作为主体弹跳圆形，一个作为其阴影部分，分别设置 animation 动画参数，注意这里设置了反向播放参数 alternate
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>弹跳的圆</title>
</head>
<body>
<div class="app">
<div class="yuan19"></div>
</div>
</div>
</body>
</html>
|
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.yuan19{
width: 20px;
height: 66px;
position: relative;
}
.yuan19:before{
content: '';
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
background-color: #333;
animation: yuan191 .5s ease infinite alternate;
}
@keyframes yuan191 {
0% {
top: 60px;
height: 5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.5);
}
50% {
height: 20px;
border-radius: 50%;
transform: scaleX(1);
}
100% {
top: 0;
}
}
.yuan19:after{
content: '';
width: 20px;
height: 4px;
border-radius: 50%;
position: absolute;
top: 62px;
animation: yuan1912 .5s ease infinite alternate;
}
@keyframes yuan1912 {
0% {
filter: blur(1px);
transform: scaleX(1.5);
background-color: rgba(0,0,0,0.9);
}
50% {
transform: scaleX(1);
background-color: rgba(0,0,0,0.6);
}
100% {
filter: blur(2px);
transform: scaleX(0.5);
background-color: rgba(0,0,0,0.3);
}
}
|
动态的波纹字
使用 linear-gradient 拉出网格渐变，然后通过 animation 参数来改变 background-size 数据，形成不停变化的纹理效果。
实现思路：
- 主体一个 div 标签
- 用 background-image: linear-gradient(…) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再设置 animation 的参数，修改 background-size 参数实现纹理不停变化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>动态的波纹字</title>
</head>
<body>
<div class="app">
<div class="font20">不就是<br>玩嘛！</div>
</div>
</div>
</body>
</html>
|
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
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font20{
color: transparent;
font-size: 70px;
font-weight: 900;
background-image: linear-gradient(-45deg, #fff 0%, #fff 25%, green 25%, green 50%, #fff 50%, #fff 75%, green 75%, green 100%);
-webkit-background-clip: text;
animation: font20 10s ease infinite;
}
@keyframes font20{
0%{
background-size: 1px 2px;
}
20%{
background-size: 4px 5px;
}
40%{
background-size: 3px 4px;
}
60%{
background-size: 5px 6px;
}
80%{
background-size: 2px 3px;
}
100%{
background-size: 7px 6px;
}
}
|
好看的格栅字
先绘制出渐变网格的文字效果，再利用 :before 以及搭配 content + attr(…)实现一个好看的网格阴影的文字
实现思路：
- 一个 div 标签，添加 data-text
- 用 background-image: linear-gradient(…) 拉出网格渐变纹理，然后使用 -webkit-background-clip 配合 color: transparent 使文字加上纹理，再使用 content + attr(…) 并让其覆盖到网格文字上面，形成视觉阴影效果
此效果应该算是上一个的姊妹篇，可适用于内容的大标题等场景
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>好看的网格阴影文字</title>
</head>
<body>
<div class="app">
<div class="font21" data-text="不就是玩嘛">不就是<br>玩嘛</div>
</div>
</div>
</body>
</html>
|
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
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font21{
color: transparent;
font-size: 70px;
font-weight: 900;
letter-spacing: 10px;
background-image: linear-gradient(-45deg, #ffffff 0%, #ffffff 25%, green 25%, green 50%, #ffffff 50%, #ffffff 75%, green 75%, green 100%);
background-size: 4px 4px;
-webkit-background-clip: text;
position: relative;
}
.font21:before{
content: attr(data-text);
letter-spacing: 10px;
color: green;
position: absolute;
top: -6px;
left: -6px;
text-shadow: 2px 2px #ffffff;
}
|
旋转的金币
通过 animation 和 transform 来实现金币的 Y 轴旋转。
实现思路：
- 一个 div 标签
- 用 box-shadow 实现金币的双层边框，设置 animation 的参数，修改 animation-timing-function 运动参数来实现旋转速度变化，修改 transform 参数让金币绕 Y 轴旋转
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>旋转的金币</title>
</head>
<body>
<div class="app">
<div class="icon22">¥</div>
</div>
</body>
</html>
|
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
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.icon22{
width: 72px;
height: 72px;
line-height: 72px;
text-align: center;
color: #daa500;
font-size: 40px;
font-weight: 900;
background-color: #ffee00;
border-radius: 50%;
box-shadow: inset 0 0 0 4px #ffee00,inset 0 0 0 5px #daa500,0 5px 12px rgba(0,0,0,0.2);
animation: ani-icon22 5s ease infinite;
}
@keyframes ani-icon22{
0%{
transform: rotateY(0deg);
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
50%{
transform: rotateY(900deg);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
100%{
transform: rotateY(1800deg);
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
}
|
一个旋转的金币，适用于游戏网站，会员币等场景。
霓虹灯文字
利用 animation 动画设置关键帧参数，再设置不同的延迟时间，达到一个闪烁的效果。
实现思路：
- 页面搭建鸿星尔克品牌名称以及它耳熟能详的的slogan “To Be Number One”
- 利用 animation 动画在关键帧中设置不同的显示效果，然后不同的元素设置 animation-delay 加上不同的延迟时间，形成闪烁的视觉效果
- 注意：设置 animation 动画时，animation-fill-mode 要设置为 forwards，以使动画执行完后保持在最后的状态不变
此效果可适用于一些文字入口、游戏类网站文字显示效果等场景。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>闪烁的霓虹灯文字</title>
</head>
<body>
<div class="app">
<div class="light23">
<div class="title23">
<span>鸿</span>
<span>星</span>
<span>尔</span>
<span>克</span>
</div>
<div class="info23">
<span>to be number one</span>
</div>
</div>
</div>
</body>
</html>
|
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
49
50
51
52
53
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.light23{
cursor: default;
}
.title23{
color: #eaeaea;
font-size: 32px;
font-weight: 900;
}
.info23{
color: #eaeaea;
font-size: 16px;
letter-spacing: 1px;
text-transform: capitalize;
}
.light23:hover .title23 span{
animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){
animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){
animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){
animation-delay: .78s;
}
@keyframes light{
10%,30%,50%{
color: #eaeaea;
text-shadow: none;
}
20%,40%,60%{
color: #318BF6;
text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
}
100%{
color: #318BF6;
text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;
}
}
.light23:hover .info23 span{
animation: light 0.4s ease forwards;
animation-delay: 1s;
}
|
故障字体效果
通过 animation 和 transform 来实现一个故障字体效果。
实现思路：
- 一个 div 标签，设置 data-text 值
- 用 :before 和 :after 生成两个伪元素，设置 mix-blend-mode 混合模式，再分别设置 animation 的参数，让两个伪元素动起来，最后给主体 div 设置一个 transform: skew(…) 变形的 animation 实现视觉上故障的效果
适用于网页404状态等场景应用。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>故障字体效果</title>
</head>
<body>
<div class="app">
<div class="font24" data-text="404">404</div>
</div>
</body>
</html>
|
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font24 {
width: 156px;
height: 98px;
position: relative;
font-size: 70px;
font-weight: 900;
color: transparent;
letter-spacing: 10px;
z-index: 10;
animation: text-skew 4s linear infinite;
}
.font24:before,.font24:after {
display: block;
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
}
.font24:before {
animation: text-light 1s alternate-reverse infinite;
color: #ff0000;
z-index: -5;
text-shadow: 2px 2px 0 #00ff00;
mix-blend-mode: darken;
}
.font24:after {
animation: text-light2 0.5s alternate-reverse infinite;
color: #00ff00;
z-index: -10;
text-shadow: 2px 2px 0 #ff0000;
}
@keyframes text-light{
10% {
transform: translate(-2px,4px);
}
50% {
transform: translate(2px, 2px);
}
100% {
transform: translate(-4px,4px);
}
}
@keyframes text-light2{
0% {
transform: translate(0,0);
}
20% {
transform: translate(-2px,2px);
}
40% {
transform: translate(-2px,2px);
}
60% {
transform: translate(2px, -2px);
}
80% {
transform: translate(2px, 2px);
}
100% {
transform: translate(0,0);
}
}
@keyframes text-skew{
29%{
color: transparent;
transform: skew(0deg,0deg);
}
30%{
color: #000000;
transform: skew(10deg,40deg);
}
31%{
color: transparent;
transform: skew(0deg,0deg);
}
69%{
color: transparent;
transform: skew(0deg,0deg);
}
70%{
color: #000000;
transform: skew(180deg,10deg);
}
71%{
color: transparent;
transform: skew(0deg,0deg);
}
}
|
乱码效果
通过 animation 配合伪元素搭配 content 属性来实现字符变换，实现一段字符不停更换。
实现思路：
- 一个 div 标签，div 内文字元素为英文字符最好
- 用 :after 配合 content 属性，设置 animation 的参数让 content 内的字符进行变化，实现视觉上一种乱码的效果。这里要注意的是 content 内的字符长度不能超过主体 div 内字符的长度，也是前面为什么说主体 div 内的文字元素最好是英文字符的原因，为的是保持视觉上的统一
适用于网页异常状态等场景应用。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>一串乱码</title>
</head>
<body>
<div class="app">
<div class="font25">The Bug!</div>
</div>
</body>
</html>
|
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| .app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.font25{
position: relative;
font-size: 24px;
font-weight: 900;
color: #1630f1;
letter-spacing: 10px;
background-color: #ffffff;
}
.font25:after{
content: '';
position: absolute;
top: 0;
z-index: 10;
background-color: inherit;
animation: text-ani25 2.4s linear infinite;
animation-delay: 2s;
}
@keyframes text-ani25{
0%{
content: "$-";
left: 0;
}
5%{
content: ";y";
left: 0;
}
10%{
content: "*&#H";
left: 0;
}
15%{
content: "-!);";
left: 0;
}
20%{
content: "#$_}-'";
left: 0;
}
25%{
content: ":0^!$.";
left: 0;
}
30%{
content: "#{+.-?#u";
left: 0;
}
35%{
content: "f7*%}-;#";
left: 0;
}
40%{
content: "^='?'*$!";
left: 0;
}
45%{
content: "+0^&!`^-";
left: 0;
}
50%{
content: "&-?>-=|`";
left: 0;
}
55%{
content: "u<|:#-";
left: auto;
right: 0;
}
60%{
content: ";~0
