知识点： 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 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>渐变加载条</title> </head> <body> <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> </body> </html> |
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); } } |
页面渲染效果
