IT俱乐部 CSS CSS实现渐变式圆点加载动画

CSS实现渐变式圆点加载动画

发布: 2024年 9月 24日 500阅读

整体效果

知识点： animation 时间函数 steps()。

用 css3 模拟一个渐变式圆点加载效果。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

1
2
3
4
5
6
7
8
9
10
<div class="loading38">
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
  <span class="load-span38"></span>
</div>

用8个 span 标签绘制8个圆点。

css 部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.loading38 {
  --r-num: 45deg; /*定义角度值*/
  width: 40px;
  height: 40px;
  position: relative;
  animation: loading38-eff 1s steps(8) both infinite; /*steps函数*/
}
.load-span38{
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 3px;
  position: absolute;
  left: 17px;
  top: 0;
  transform-origin: 3px 20px; /*定义变形中心点*/
}
.load-span38:nth-of-type(1){
  transform: rotate(var(--r-num));
  background: #2FACFD;
}
.load-span38:nth-of-type(2){
  transform: rotate(calc(var(--r-num)*2));
  background: #33B4FD;
}
.load-span38:nth-of-type(3){
  transform: rotate(calc(var(--r-num)*3));
  background: #38BEFE;
}
.load-span38:nth-of-type(4){
  transform: rotate(calc(var(--r-num)*4));
  background: #3ECAFE;
}
.load-span38:nth-of-type(5){
  transform: rotate(calc(var(--r-num)*5));
  background: #45D7FE;
}
.load-span38:nth-of-type(6){
  transform: rotate(calc(var(--r-num)*6));
  background: #4BE4FE;
}
.load-span38:nth-of-type(7){
  transform: rotate(calc(var(--r-num)*7));
  background: #52F1FF;
}
.load-span38:nth-of-type(8){
  transform: rotate(calc(var(--r-num)*8));
  background: #57FBFF;
}
@keyframes loading38-eff{
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}

1、8个 span 绘制8个圆点，分别写上不同的背景色

2、通过 transform-origin 属性来定义变形的中心点，然后给每个圆点计算角度变形（这里我定义的角度值为 （360°/8 = 45°）），注意这里的每次变形是基于上一个圆点的角度 +45deg

3、最后给整体加上 animation 动画，并设置时间函数 steps() 为8，意思是分8次整体旋转完成 360deg

完整代码如下

html 页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<title>渐变加载条</title><div class="app">
  <div class="loading38">
    <span class="load-span38"></span>
    <span class="load-span38"></span>
    <span class="load-span38"></span>
    <span class="load-span38"></span>
    <span class="load-span38"></span>
    <span class="load-span38"></span>
    <span class="load-span38"></span>
    <span class="load-span38"></span>
  </div>
</div>

css 样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading38 {
  --r-num: 45deg; /*定义角度值*/
  width: 40px;
  height: 40px;
  position: relative;
  animation: loading38-eff 1s steps(8) both infinite;
}
.load-span38{
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 3px;
  position: absolute;
  left: 17px;
  top: 0;
  transform-origin: 3px 20px;
}
.load-span38:nth-of-type(1){
  transform: rotate(var(--r-num));
  background: #2FACFD;
}
.load-span38:nth-of-type(2){
  transform: rotate(calc(var(--r-num)*2));
  background: #33B4FD;
}
.load-span38:nth-of-type(3){
  transform: rotate(calc(var(--r-num)*3));
  background: #38BEFE;
}
.load-span38:nth-of-type(4){
  transform: rotate(calc(var(--r-num)*4));
  background: #3ECAFE;
}
.load-span38:nth-of-type(5){
  transform: rotate(calc(var(--r-num)*5));
  background: #45D7FE;
}
.load-span38:nth-of-type(6){
  transform: rotate(calc(var(--r-num)*6));
  background: #4BE4FE;
}
.load-span38:nth-of-type(7){
  transform: rotate(calc(var(--r-num)*7));
  background: #52F1FF;
}
.load-span38:nth-of-type(8){
  transform: rotate(calc(var(--r-num)*8));
  background: #57FBFF;
}
@keyframes loading38-eff{
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}

页面渲染效果

到此这篇关于CSS实现渐变式圆点加载动画的文章就介绍到这了,更多相关CSS加载动画内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/css/13777.html
126赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部