Autor: AlbertYang, diseñadores de software, ingenieros de Java, ingeniero de front-end, les encanta leer, les encanta pensar, les encanta la programación, les encanta la libertad, creen en el aprendizaje permanente, aprender un poco todos los días, es un comienzo líder.
Cuenta pública de WeChat: AlbertYang
Hoy te enseño cómo usar CSS para lograr un efecto de animación de botón de neón. Si no lo entiendes, puedes dejar un mensaje y preguntarme. El video se ha sincronizado con la estación B. Bienvenido a seguir mi cuenta en la estación B.
vídeo
Enlace de video : https://www.bilibili.com/video/BV1Zi4y1F7ut
Animación de botones de neón CSS, CSS realiza una animación de botones de neón genial
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;
}
Este es el final del estudio de hoy. Debido a mi capacidad y conocimientos limitados, si hay algún problema con la escritura, por favor, critícame y corrígeme. Si no entiendes nada, déjame un mensaje. Si quieres seguir aprendiendo y mejorando, por favor prestame atención y haz un pequeño progreso todos los días, que es el comienzo de la iniciativa. Vamos. Si cree que este artículo es útil para usted, bienvenido a reenviar, comentar y dar me gusta. ! !