CSS实现一个故障时钟效果

起因

最近公司事情不是太多，我趁着这段时间在网上学习一些Cool~的效果。今天我想和大家分享一个故障时钟的效果。很多时候，一个效果开始看起来很难，但是当你一步步摸索之后，就会发现其实它们只是由一些简单的效果组合而成的。

什么是故障效果(Glitch)

"glitch" 效果是一种模拟数字图像或视频信号中出现的失真、干扰或故障的视觉效果。它通常表现为图像的一部分或整体闪烁、抖动、扭曲、重叠或变形。这种效果常常被用来传达技术故障、数字崩溃、未来主义、复古风格等主题，也经常在艺术作品、音乐视频、电影、广告和网页设计中使用。Glitch 效果通常通过调整图像、视频或音频的编码、解码或播放过程中的参数来实现。 来自ChatGPT

可以看到关键的表现为一部分或整体闪烁、抖动、扭曲、重叠或变形，所以我们应该重点关注用CSS实现整体闪烁、抖动、扭曲、重叠或变形

CSS 实现闪烁

Glitch 闪烁通常是指图像或视频中出现的突然的、不规则的、瞬间的明暗变化或闪烁效果

那么我们有没有办法通过CSS来实现上述的效果，答案是通过随机不规则的clip-path来实现！

我们先来看看clip-path的定义与用法

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

/* <basic-shape>