<!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>
鼠标放在文字上会变化
