linear-gradient(#000 0 0) 你可以理解为 linear-gradient(#000 0 100%)，如果还不熟悉，复制 linear-gradient(#000 0 50%, #f00 50% 0) ，替换原先的部分跑一下。觉得 linear-gradient(#000 0 0) 别扭的话，直接写 #000 即可。 0/0% 是 background-position: 0;/background-size: 0; 的简写。
steps(10) 是 step(10, end) 的简写，指明刚开始没有，所以有第2点的处理 100% {background-size:110%} 添加多一个 step 的百分比，上面的 step 是 10，所以是100% + (1/10)*100% = 110%
repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0/100%; 画出灰色的斑马线条纹，repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0% no-repeat 则是进度条加载的条纹。
-webkit-mask 默认有值 repeat，不然遮罩不会有五个。
是透明，同等 transparent
inset:0 100% 0 0; 右边内缩 100%，所以在 keyframes 部分需要将 inset 设置为 0。
遮罩 -webkit-mask 中 radial-gradient 是将宽度四等份，每份以最小 closest-side 的边为直径画圆。
对 linear-gradient 描绘的角度做调整，再加上蒙版。
radial-gradient 画出水平面的波动，就三个圆。var(--r1) 直接调用定义好的属性值。技能 get ...
用 repeating-radial-gradient 方法画出环状的蒙版遮罩。radial-gradient 从底部向上圆形渐变填充。
利用 CSS @property (chrome 85+)实现的动态线条效果。
定义一个 div元素，设置边长为 40px 背景白色的正方形，然后设置循环翻转动画实现该加载效果动画。perspective 属性定义 3D 元素距视图的距离
定义一个父元素 div，内含六个蓝色实心圆点，添加旋转动画，通过设置不同的延迟时间来达到依次出现的效果
两个子元素 div 实现半透明的圆形，设置绝对定位重叠在一起，然后设置相同的动画通过不同的延迟时间交替放大缩小。