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);
如果你觉得写的还可以的话,就不吝啬你的赞和鼓励吧~