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

863 阅读3分钟

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);

image.png

遮罩层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: 源中与目标重叠的部分将替换目标。

image.png

让元素 使用 合成掩模层

image.png

添加动画

添加动画:

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

Css 颜色渐变函数

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

渐变要素: 起始位置,颜色渐变范围区间,渐变方式;

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

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

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