实现倒影光感按钮，快去试试吧！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="=device-, initial-scale=1.0">
<title>Document</title>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
background:#000;
}
a{
text-decoration: none;
color: #03e9f4;
}
a{
position: relative;
display: inline-block;
padding: 30px;
margin: 50px;
text-transform:uppercase;
letter-spacing:40px;
overflow: hidden;
}
a:nth-child(1){
-webkit-filter: hue-rotate(270deg);
filter: hue-rotate(270deg);
}
a:nth-child(2){
filter:hue-rotate(110deg);
}
a>span{
display: block;
position: absolute;
}
a>span:nth-child(1){
width: 100%;
height: 2px;
top: 0;
left: 0;
background: linear-gradient(90deg,transparent,#03e9f4);
animation: span1 1s linear infinite;
}
a>span:nth-child(2){
width : 2px;
height: 100%;
top: -100%;
right: 0;
background: linear-gradient(180deg,transparent,#03e9f4);
animation: span2 1s 0.25s linear infinite;
}
a>span:nth-child(3){
width: 100%;
height: 2px;
right: 0;
bottom:0;
background: linear-gradient(270deg,transparent,#03e9f4);
animation: span3 1s .5s linear infinite;
}
a>span:nth-child(4){
width: 2px;
height: 100%;
left: 0;
bottom:-100%;
background: linear-gradient(360deg,transparent,#03e9f4);
animation: span4 1s .75s linear infinite;
}
.button-list{
overflow: hidden;
}
@keyframes span1 {
0%{
left:-100%
}
50%,100%{left:100%}
}
@keyframes span2 {
0%{
top:-100%
}
50%,100%{top:100%}
}
@keyframes span3 {
0%{
right:-100%
}
50%,100%{right:100%}
}
@keyframes span4 {
0%{
bottom:-100%
}
50%,100%{bottom:100%}
}
a:hover{
background:#03e9f4;
color:#050001;
box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 200px #03e9f4;
-webkit-box-reflect:below 1px linear-gradient(transparent,#0005) ;
}
</style>
</head>
<body>
<div class="button-list">
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
button
</a>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
button
</a>
<a href="">
<span></span>
<span></span>
<span></span>
<span></span>
button
</a>
</div>
</body>
</html>
