<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>陳山羊/故障霓虹灯</title>
<style>
body{
background-image: url("sbpk.jpg");
background-size: cover;
background-attachment: fixed;
display: flex;
justify-content: center;
}
.a{
position: relative;
top: 180px;
width: 500px;
height: 120px;
border: solid 10px #fff;
box-shadow: 0 0 70px rgb(190,40,210);
display: flex;
justify-content: center;
align-items: center;
/* 设置鼠标移上去时变成小手形状 */
cursor: pointer;
}
.a::after{
content: '';
position: absolute;
width: 500px;
height: 120px;
box-shadow: 0 0 5px rgba(190,40,210);
background-color: rgba(100,30,225,.4);
}
.a:hover{
animation: a 1.5s;
}
@keyframes a{
0%,34%,68%,100%{
border: solid 10px #fff;
box-shadow: 0 0 70px rgb(190,40,210);
}
17%,51%,85%{
border: solid 10px rgba(255,0,0,.5);
box-shadow: 0 0 90px rgba(255,0,0,.8);
}
}
.b,.b::before{
z-index: 999;
color: #fff;
position: absolute;
font-size: 65px;
font-weight: 900;
/* 设置字体间距 */
letter-spacing: 12px;
}
.b::before{
content: 'GOAT/CSY';
text-shadow: -5px -5px 0px rgb(211,250,9),5px 5px 0px rgb(25,10,240);
/* 使用缩放的方式创建可见显示取余，括号里的四个值分别是top，right，bottom，left */
clip-path: inset(100% 0px 0px 0px);
}
.a:hover .b::before{
/* steps设置逐帧动画，值越小越卡顿 */
animation: move 1.25s steps(2);
}
/* 这是制造混乱的位置和高宽，可以自行改变，随机的 */
@keyframes move{
0%{
clip-path:inset(80% 0px 0px 0px);
transform:translate(-20px,-10px)
}
10%{
clip-path:inset(10% 0px 85% 0px);
transform:translate(10px,10px)
}
20%{
clip-path:inset(80% 0px 0px 0px);
transform:translate(-10px,10px)
}
30%{
clip-path:inset(10% 0px 85% 0px);
transform:translate(0px,5px)
}
40%{
clip-path:inset(50% 0px 30% 0px);
transform:translate(-5px,0px)
}
50%{
clip-path:inset(10% 0px 30% 0px);
transform:translate(5px,0px)
}
60%{
clip-path:inset(40% 0px 30% 0px);
transform:translate(5px,10px)
}
70%{
clip-path:inset(50% 0px 30% 0px);
transform:translate(-10px,10px)
}
80%{
clip-path:inset(80% 0px 5% 0px);
transform:translate(20px,-10px)
}
90%{
clip-path:inset(80% 0px 0px 0px);
transform:translate(-10px,0px)
}
100%{
clip-path:inset(80% 0px 0px 0px);
transform:translate(0px,0px)
}
}
</style>
</head>
<body>
<div class="a">
<div class="b"><span>
GOAT/CSY
</span></div>
</div>
</body>
</html>
鼠标放在文字上会变化