<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background-color:rgb(4,4,19);
}
.night{
position:relative;
width:300px;
height:100px;
color:rgb(18,190,243);
letter-spacing:12px;
font-size:50px;
line-height:100px;
text-align:center;
/*background-color:rgb(31,49,133);*/
background-image:linear-gradient(90deg,rgb(40,62,161)50%,rgb(31,49,133)50%);
text-transform:uppercase;
user-select:none;
text-decoration:none;
overflow:hidden;
box-shadow:inset0010pxrgb(14,20,105),
005pxrgb(9,208,235);
transition:all0.5s;
}
.night:hover{
text-shadow:005pxrgb(18,190,243),
008pxrgb(18,190,243),
0010pxrgb(18,190,243);
background-image:linear-gradient(90deg,rgb(25,38,99)50%,rgb(13,22,58)50%);
box-shadow:inset0010pxrgb(14,20,105),
005pxrgb(9,208,235),
0010pxrgb(9,208,235);
}
.nightspan{
position:absolute;
}
.nightspan:nth-child(1){
top:0;
left:0;
width:100%;
height:2px;
background-image:linear-gradient(toright,transparent,rgb(0,153,255));
animation:move12slinearinfinite;
}
@keyframesmove1{
0%{
transform:translateX(-100%);
}
100%{
transform:translateX(100%);
}
}
.nightspan:nth-child(2){
top:0;
right:0;
width:2px;
height:100%;
transform:translateY(-100%);
background-image:linear-gradient(tobottom,transparent,rgb(0,153,255));
animation:move22slinearinfinite;
animation-delay:1s;
}
@keyframesmove2{
100%{
transform:translateY(100%);
}
}
.nightspan:nth-child(3){
left:0;
bottom:0;
width:100%;
height:2px;
background-image:linear-gradient(toleft,transparent,rgb(0,153,255));
animation:move32slinearinfinite;
}
@keyframesmove3{
0%{
transform:translateX(100%);
}
100%{
transform:translateX(-100%);
}
}
.nightspan:nth-child(4){
top:0;
left:0;
width:2px;
height:100%;
transform:translateY(100%);
background-image:linear-gradient(totop,transparent,rgb(0,153,255));
animation:move42slinearinfinite;
animation-delay:1s;
}
@keyframesmove4{
100%{
transform:translateY(-100%);
}
}
</style>
</head>
<body>
<ahref="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343"class="night"target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
</body>
</html>
|