当前位置：首页 > 网页制作 > CSS > 详细页面

CSS3.0实现霓虹灯按钮动画特效的示例代码

时间：2021-01-13来源：www.pcxitongcheng.com作者：电脑系统城

今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效，效果如下：

以下是代码实现，欢迎大家复制粘贴和收藏。

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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166 <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0实现霓虹灯按钮动画特效</title>
<style>
* {
font-family: '微软雅黑', sans-serif;
box-sizing: border-box;
}

body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #050801;
}

a {
position: relative;
display: inline-block;
padding: 25px 30px;
margin: 0 50px;
color: #03e9f4;
text-decoration: none;
overflow: hidden;
transition: 0.5;
letter-spacing: 4px;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}

a:nth-child(1) {
filter: hue-rotate(290deg);
}

a:nth-child(3) {
filter: hue-rotate(110deg);
}

a:hover {
background: #03e9f4;
color: #050801;
box-shadow: 0 0 5px #03e9f4,
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
}

a span {
position: absolute;
display: block;
}

a span:nth-child(1) {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #03e9f4);
animation: animate1 1s linear infinite;
}

@keyframes animate1 {
0% {
left: -100%;
}

50%,
100% {
left: 100%;
}
}

a span:nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 2px;
background: linear-gradient(92deg, transparent, #03e9f4);
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}

@keyframes animate2 {
0% {
top: -100%;
}

50%,
100% {
top: 100%;
}
}

a span:nth-child(3) {
bottom: 0;
right: -100%;
height: 2px;
width: 100%;
background: linear-gradient(180deg, transparent, #03e9f4);
animation: animate3 1s linear infinite;
animation-delay: 0.5s;
}

@keyframes animate3 {
0% {
right: -100%;
}

50%,
100% {
right: 100%;
}
}

a span:nth-child(4) {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(270deg, transparent, #03e9f4);
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}

@keyframes animate4 {
0% {
bottom: -100%;
}

50%,
100% {
bottom: 100%;
}
}
</style>
</head>

<body>
<a href="#">




NENO BUTTON
</a>
<a href="#">




NENO BUTTON
</a>
<a href="#">




NENO BUTTON
</a>
</body>

</html>