先放个实现效果
整体借鉴思路
https://mp./s/zf6cIjlDFhg_2qH6hQghNg
这里说下比较关键的点：
1. 按钮左下角的隐藏
/* 45°斜角，从透明变色到红色 */background:linear-gradient(45deg,transparent5%,red15%);
2.故障动画
2.1 需要一个样式相同的伪元素，覆盖在按钮上。并且按钮设置text-shadow阴影（造成视觉上的光亮模糊）
2.2 通过clip裁剪伪元素的样式，需要裁剪多个不同的位置
clip-path在chrome下没能正常work，所以用clip替换
/* 比如：裁剪一个矩形，上右下左如下，一个起始位置20px的宽拉满高10px矩形 */clip: rect(20px, 386px, 30px, 0px);
2.3 设置动画，显示不同的裁剪位置并位移
设置到50%留下一半的时间恢复原状，以便视觉上暂停一会再继续重复动画
steps(4, end)是设置卡顿感
.btn:hover::after { --slice-0: rect(0px, 0px, 0px, 0px);--slice-1: rect(20px, 386px, 30px, 0px);--slice-2: rect(40px, 386px, 50px, 0px);--slice-3: rect(50px, 386px, 60px, 0px);--slice-4: rect(76px, 386px, 86px, 0px);content: 'AVAILABLE NOW';display: block;left: 0;top: 0;/* 内联高度 */line-height: 86px;/* 斜角渐变里，加一点蓝色 */background: linear-gradient(45deg, transparent 3%, #00e6f6 5%, red 5%);/* 文本阴影，可以添加多个，逗号相隔 */text-shadow: -3px -3px 0px yellow, 3px 3px 0px #00e6f6;/* 默认状态裁剪不显示，后续动画改 */visibility: hidden;/* 动画 执行2秒 */animation: 1.6s steps(4, end) 0s infinite normal glitch;}
@keyframes glitch {/* translate实现视觉上的小移动 */0% {visibility: visible;clip: var(--slice-3);transform: translate(-20px, -10px);}5% {clip: var(--slice-2);transform: translate(10px, 10px);}10% {clip: var(--slice-4);transform: translate(-10px, 10px);}15% {clip: var(--slice-1);transform: translate(0px, 0px);}20% {clip: var(--slice-4);transform: translate(-5px, 0px);}25% {clip: var(--slice-3);transform: translate(5px, 0px);}30% {clip: var(--slice-0);transform: translate(0);}35% {clip: var(--slice-3);transform: translate(-10px, 10px);}40% {clip: var(--slice-1);transform: translate(20px, -10px);}45% {clip: var(--slice-2);transform: translate(-10px, 0px);}50% {visibility: hidden;clip: var(--slice-1);transform: translate(0);}}
