作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。
微信公众号：AlbertYang
今天教大家使用CSS实现一个霓虹灯按钮动画效果，大家有什么不懂的可以留言问我，视频已经同步到B站，欢迎关注我的B站账号。
视频
视频链接：https://www.bilibili.com/video/BV1Zi4y1F7ut
CSS霓虹灯按钮动画，CSS实现炫酷的霓虹灯按钮动画
HTML
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>霓虹灯按钮：微信公众号AlbertYang
</title>
-
<link rel="stylesheet" href="style.css">
-
</head>
-
<body>
-
<!-- 容器 -->
-
<div class="container">
-
<!-- 按钮 -->
-
<a href="#" style="--x:0">
<span>关注
</span>
</a>
-
<a href="#" style="--x:1">
<span>收藏
</span>
</a>
-
<a href="#" style="--x:2">
<span>投币
</span>
</a>
-
<a href="#" style="--x:3">
<span>点赞
</span>
</a>
-
<a href="#" style="--x:4">
<span>评论
</span>
</a>
-
<a href="#" style="--x:5">
<span>转发
</span>
</a>
-
</div>
-
</body>
-
</html>
CSS
-
/* 清除浏览器默认边距，
-
使边框和内边距的值包含在元素的height和width内 */
-
* {
-
margin:
0;
-
padding:
0;
-
box-sizing: border-box;
-
}
-
/* flex布局，让内容垂直和水平居中 */
-
body {
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
min-height:
100vh;
-
background:
#000;
-
}
-
/* flex布局，让内容垂直和水平居中，超过的部分换行显示 */
-
.container {
-
display: flex;
-
justify-content: center;
-
align-items: center;
-
flex-wrap: wrap;
-
}
-
/* 按钮的基本样式 */
-
.container
a {
-
position: relative;
-
padding:
15px
30px;
-
margin:
50px;
-
border:
2px solid
#0f0;
-
font-size:
18px;
-
font-weight:
600;
-
text-decoration: none;
-
letter-spacing:
5px;
-
color:
#fff;
-
filter:
hue-rotate(calc(var(--x) *
60deg));
-
transition:
0.5s;
-
}
-
/* 鼠标经过时改变按钮样式 */
-
.container
a
:hover {
-
transition-delay:
1.5s;
-
color:
#000;
-
box-shadow:
0
0
10px
#0f0,
-
0
0
20px
#0f0,
-
0
0
40px
#0f0,
-
0
0
80px
#0f0,
-
0
0
160px
#0f0,
-
0
0
320px
#0f0;
-
}
-
a
span {
-
position: relative;
-
z-index:
10;
-
}
-
/* 通过伪元素::before实现按钮左边的线 */
-
.container
a
::before {
-
content:
"";
-
position: absolute;
-
left: -
20px;
-
top:
50%;
-
transform:
translateY(-
50%);
-
background:
#0f0;
-
width:
20px;
-
height:
2px;
-
box-shadow:
5px -
8px
0
#0f0,
-
5px
8px
0
#0f0;
-
transition: width
0.5s, height
0.5s, left
0.5s,
-
box-shadow
0.5s;
-
transition-delay:
0s,
1s,
0s,
0.5s;
-
}
-
/* 鼠标经过时改变线条的样式 */
-
.container
a
:hover
::before {
-
width:
60%;
-
height:
100%;
-
left: -
2px;
-
box-shadow:
0
0
0
#0f0,
-
0
0
0
#0f0;
-
}
-
/* 通过伪元素::after实现按钮右边的线 */
-
.container
a
::after {
-
content:
"";
-
position: absolute;
-
right: -
20px;
-
top:
50%;
-
transform:
translateY(-
50%);
-
background:
#0f0;
-
width:
20px;
-
height:
2px;
-
box-shadow: -
5px -
8px
0
#0f0,
-
-
5px
8px
0
#0f0;
-
transition: width
0.5s, height
0.5s, right
0.5s,
-
box-shadow
0.5s;
-
transition-delay:
0s,
1s,
0s,
0.5s;
-
}
-
/* 鼠标经过时改变线条的样式 */
-
.container
a
:hover
::after {
-
width:
60%;
-
height:
100%;
-
right: -
2px;
-
box-shadow:
0
0
0
#0f0,
-
0
0
0
#0f0;
-
}
今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！
转载：https://blog.csdn.net/qq_23853743/article/details/112388284
查看评论