CSS实现渐变式圆点加载动画-CFANZ编程社区

这篇文章主要为大家详细介绍了如何使用 css3 模拟一个渐变式圆点加载效果，文中的示例代码讲解详细，具有一定的借鉴价值，有需要的小伙伴可以跟随小编一起学习一下

整体效果

知识点： 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);` `}` `}`

页面渲染效果

到此这篇关于CSS实现渐变式圆点加载动画的文章就介绍完了。