CSS实现最简洁的加载动画

纯CSS能实现的功能越来越多了，能用css实现的就别用js，今天教大家用最短的代码实现下面这个加载动画，这个加载动画的优势不仅是短小，而且不需要额外的dom元素就可实现，因此在那些异步加载的dom身上使用非常方便，比如<img>、<video>、<canvas>等，实现了【样式-结构-数据】的分离，大大提升了开发和运行的效率。

如图，我们要在任何一个dom元素的背景上播放这样的横条，首先想到的是利用repeating-linear-gradient()重复线性渐变函数（渐变函数常常被用来做突变图），然后设置背景图的尺寸和位置，禁用Y方向上的瓦片重复，但启用X方向上的重复，因为隐藏掉X重复，我们的小矩形是这样运动的：

只要调整合适的时间间隔，往复循环，就可以无缝地首尾衔接，营造出连续的运动效果，这里我特地让条纹与水平线呈30°夹角，因为这样的直角三角形中，斜边正好是短边的2倍，易于计算，其中短边就是一对条纹的厚度，斜边则是小矩形的宽度，同时还要将单条纹的厚度作为可变量w，那么黑白双条纹的厚度就是2w，小矩形的宽度和运动距离就是是4w，虽然用CSS实现更简单，但是为了控制动画的生命周期，统一用JS来做吧：

// 条纹厚度
const w = 3;
// 加载动画的容器
const loading = document.getElementById('loading');
const background =
  `center / ${w * 4}mm 1cm repeat no-repeat ` +
  `repeating-linear-gradient(-30deg, white 0, white ${w}mm, black ${w}mm, black ${w * 2}mm)`;
// 开始动画
const animation = loading.animate(
  [
    { backgroundPositionX: "0", background },
    { backgroundPositionX: w * 4 + "mm", background },
  ],
  {
    // 周期
    duration: 500,
    iterations: Infinity,
  }
);
// 结束动画
animation.cancel();

而且，可以根据原型图的要求调整样式，无论如何也不会超过20行CSS就能轻松实现，何必去使用那么大的第三方库呢？