loading 大全，学你想学的css样式

css loading 大全网站 这里有许多有趣的loading样式，通过一键复制可以快速复刻，如果你看不懂css代码也没有关系，交给我们勤劳的gpt去告诉就行。

一个相对比较简单常见的loading 进行学习

这个loading的css样式，可以把它分成三部分：内容、 遮罩 和动画部分。

.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%, #f03355);
  
  
  mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
    radial-gradient(
      farthest-side,
      #0000 calc(100% - var(--b) - 1px),
      #000 calc(100% - var(--b))
    );
  mask-composite: intersect;
  
 
  animation: l4 1s infinite steps(10);
}
@keyframes l4 {
  to {
    transform: rotate(1turn);
  }
}

构建内容

利用圆锥曲线梯度函数创建一张 css image渐变图像 （这里有一个trick，#0000是非法的颜色表示，浏览器解析成背景色（白色），#f03355 表示粉色）

.loader {
  width: 50px;
  --b: 8px;
  aspect-ratio: 1; // 比例宽高 1:1
  border-radius: 50%;
  padding: 1px;
 
  background: conic-gradient(#0000 10%, #f03355) content-box;
  

添加遮罩

  mask: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg),
    radial-gradient(
      farthest-side,
      #0000 calc(100% - var(--b) - 1px),
      #000 calc(100% - var(--b))
    );
  mask-composite: intersect;

遮罩层1 图片：使用 repeating-conic-gradient (重复圆锥曲线梯度函数)

#0000（背景色） -> #000 （黑色）1deg
#000 -> #000 (黑色) 1deg 20deg
#000 -> #0000 (背景色) 21deg 36deg
....重复上面颜色渐变

background: repeating-conic-gradient(#0000 0deg, #000 1deg 20deg, #0000 21deg 36deg);

遮罩层2 图片 radial-gradient 径向梯度

  background: radial-gradient(
    farthest-side,
    #0000 calc(100% - var(--b) - 1px),  // 中心点 朝外41px为背景色 
    #000 calc(100% - var(--b)) // 42 到 边界 为黑色
  );

对遮罩层1和遮罩层2进行 mask-composite: intersect 合成

对于合成，当前掩模层称为源，而其下方的所有层称为目标。

intersect： 源中与目标重叠的部分将替换目标。

让元素 使用 合成掩模层

添加动画

添加动画：

  animation: l4 1s infinite steps(10);
}
@keyframes l4 {
  to {
    transform: rotate(1turn);
  }

Css 颜色渐变函数

下面是颜色渐变函数介绍，用法比较复杂，但我们要知道几点就行：

渐变要素： 起始位置，颜色渐变范围区间，渐变方式；

• repeating-conic-gradient - (重复圆锥曲线梯度)

background: repeating-conic-gradient(
    red 0%,
    black 10%
);

• radial-gradient -径向梯度

background: radial-gradient(circle,red, orange,blue);

如果你觉得写的还可以的话，就不吝啬你的赞和鼓励吧~