效果预览

代码解读

定义 dom，一个包含 3 个 span 的容器：

居中显示：

设置容器的尺寸：

设置矩形的边框样式：

设置 3 个矩形的尺寸：

用伪元素绘制左上和右下的装饰条：

定义动画效果：

把动画应用到 3 个矩形上：

最后，设置一下 3 个矩形的堆叠顺序：