前两天看到Steven大佬发的一个赛博朋克故障风的文章，觉着挺感兴趣，自己就试着敲了一下，话不多说，上代码
<!DOCTYPE html>
<html><head><meta charset="{CHARSET}"><title></title><style>body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #F8F005;
}button, button::after {width: 380px;height: 86px;font-size: 36px;font-family: 'Bebas Neue', cursive;background: linear-gradient(45deg, transparent 5%, #FF013C 5%);border: 0;color: #fff;letter-spacing: 3px;line-height: 88px;box-shadow: 6px 0px 0px #00E6F6;outline: transparent;position: relative;
}button::after {--slice-0: inset(50% 50% 50% 50%);--slice-1: inset(80% -6px 0 0);--slice-2: inset(50% -6px 30% 0);--slice-3: inset(10% -6px 85% 0);--slice-4: inset(40% -6px 43% 0);--slice-5: inset(80% -6px 5% 0);content: 'AVAILABLE NOW';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);text-shadow: -3px -3px 0px #F8F005, 3px 3px 0px #00E6F6;clip-path: var(--slice-0);
}button:hover::after {animation: 1s glitch;animation-timing-function: steps(2, end);
}@keyframes glitch {0% {clip-path: var(--slice-1);transform: translate(-20px, -10px);}10% {clip-path: var(--slice-3);transform: translate(10px, 10px);}20% {clip-path: var(--slice-1);transform: translate(-10px, 10px);}30% {clip-path: var(--slice-3);transform: translate(0px, 5px);}40% {clip-path: var(--slice-2);transform: translate(-5px, 0px);}50% {clip-path: var(--slice-3);transform: translate(5px, 0px);}60% {clip-path: var(--slice-4);transform: translate(5px, 10px);}70% {clip-path: var(--slice-2);transform: translate(-10px, 10px);}80% {clip-path: var(--slice-5);transform: translate(20px, -10px);}90% {clip-path: var(--slice-1);transform: translate(-10px, 0px);}100% {clip-path: var(--slice-1);transform: translate(0);}
}</style></head><body><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"><button>AVAILABLE NOW</button></body></html>
文件参考 https://mp.weixin.qq.com/s/zf6cIjlDFhg_2qH6hQghNg
视频地址： https://www.bilibili.com/video/BV15A411s7cX
