赛博朋克 “故障风”按钮

先放个实现效果

整体借鉴思路

https://mp.weixin.qq.com/s/zf6cIjlDFhg_2qH6hQghNg

这里说下比较关键的点：

1. 按钮左下角的隐藏

/* 45°斜角，从透明变色到红色 */
background: linear-gradient(45deg, transparent 5%, red 15%);

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)是设置卡顿感

.bt