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

发布时间：2024-03-22 08:44:27 作者：设计师工作日常

我要评论

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

整体效果

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

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

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

核心代码

html 代码

<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 部分代码

.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 页面

<!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 样式

/** 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加载动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家

Tag：css 加载动画

使用css实现水波加载动画效果
这篇文章主要介绍了使用css实现水波加载动画效果,技术上只用到了css+html，还是非常容易学习的，做出来的效果也很不错,需要的朋友可以参考下
2023-04-23
CSS心形加载的动画源码的实现
这篇文章主要介绍了CSS心形加载的动画源码的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
2020-08-10
css+html实现Skeleton Screen 加载占位图动画效果（带动画）
这篇文章主要介绍了css+html实现Skeleton Screen 加载占位图动画效果（带动画），本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要
2020-05-19
css制作超萌吃豆豆加载动画效果
这篇文章主要介绍了css制作超萌吃豆豆加载动画效果,需要的朋友可以参考下
2018-02-26
纯css写出爱心版加载效果的示例代码
这篇文章主要介绍了纯css写出爱心版加载效果的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-06
CSS实现弹簧效果的旋转加载动画
这篇文章主要介绍了CSS实现弹簧效果的旋转加载动画的相关资料，像是弹簧在不断伸缩，显示加载进度，感兴趣的小伙伴们可以参考一下
2016-04-25
CSS实现大小相同、颜色深浅不一的粒子旋转加载动画
这篇文章主要介绍了CSS实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码，运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的，感兴趣的小伙伴
2016-04-25
CSS实现圆环旋转加载动画
这篇文章主要介绍了CSS实现圆环旋转加载动画，一个圆环表示加载进度，像一个时钟顺时针旋转一圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-04-25
CSS实现横向粒子变动加载动画
这篇文章主要介绍了CSS实现横向粒子变动加载动画的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-04-25
使用Loader.css和css-spinners来制作加载动画的方法
这篇文章主要介绍了使用Loader.css和css-spinners来制作加载动画的方法,基本上使用纯CSS就可以实现,简单高效,需要的朋友可以参考下
2016-04-05