Author: AlbertYang, software designers, Java engineers, front-end engineer, love to read, love to think, love programming, love of freedom, believe in life-long learning, to learn a little bit every day, is a leading begin.
WeChat public account : AlbertYang
Today I teach you how to use CSS to achieve a neon button animation effect. If you don’t understand, you can leave a message and ask me. The video has been synchronized to station B. Welcome to follow my account on station B.
video
Video link : https://www.bilibili.com/video/BV1Zi4y1F7ut
CSS neon button animation, CSS realizes cool neon button animation
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;
}
This is the end of today's study. Due to my limited ability and knowledge, if there is something wrong with the writing, please criticize and correct me. If you don’t understand anything, please leave me a message. If you want to continue to learn and improve, please pay attention to me and make a little progress every day, which is the beginning of the lead. Come on. If you think this article is helpful to you, welcome to forward, comment, and like! ! !