一、效果:
二、代码:
2.1 HTML结构
HTML结构:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>霓虹灯按钮动画效果</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
</body>
</html>
2.2 CSS样式
CSS样式:style.css
body{
margin:0;
padding:0;
display: flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#031321;
font-family: consolas;
}
a{
position: relative;
display: inline-block;
padding:15px 30px;
color:#2196f3;
text-decoration: none;
text-transform:uppercase;
letter-spacing:4px;
font-size: 24px;
overflow: hidden;
transition: 0.2s;
}
a:hover{
color:#255784;
background:#2196f3;
box-shadow:0 0 10px #2196f3,
0 0 40px #2196f3,
0 0 80px #2196f3;
transition-delay:1s;
}
a span{
position:absolute;
display:block;
}
a span:nth-child(1){
top: 0;
left: -100%;
width: 100%;
height: 2px;
background:linear-gradient(90deg,transparent,#2196f3);
}
a:hover span:nth-child(1){
left:100%;
transition:1s;
}
/*!**!*/
a span:nth-child(3){
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background:linear-gradient(270deg,transparent,#2196f3);
}
a:hover span:nth-child(3){
right:100%;
transition:1s;
transition-delay: 0.5s;
}
/**/
a span:nth-child(2){
top: -100%;
right: 0;
height: 100%;
width: 2px;
background:linear-gradient(180deg,transparent,#2196f3);
}
a:hover span:nth-child(2){
top: 100%;
transition:1s;
transition-delay: 0.25s;
}
/**/
a span:nth-child(4){
top: 100%;
left: 0;
height: 100%;
width: 2px;
background:linear-gradient(0deg,transparent,#2196f3);
}
a:hover span:nth-child(4){
top: -100%;
transition:1s;
transition-delay: 0.75s;
}
三、 代码解析
原理:实现的方法其实很简单,使用四个span
标签将button
围起来,赋予span
一定的宽度,并为其设置一个渐变的背景颜色。最后就是通过CSS动画令span
在不同的延迟之下发生位置的改变。通过对延迟时间的掌握,看起来就像是一个光点在环绕button
运动一样。
重点:
-
background:linear-gradient(90deg,transparent,#2196f3);
设置渐变颜色,由透明渐变到#2196f3
。 -
动画效果
a:hover span:nth-child(4){
top: -100%;
transition:1s;
transition-delay: 0.75s;
}
当触发:hover
伪类的时候,发生位置的改变,top
属性由100%
变动到-100%
transition:1s
:动画在1s内执行完毕
transition-delay:0.75s
:延迟0.75s开启动画。