使用CSS3实现loading效果

效果展示

具体实现

示例完全是使用 html+CSS3 实现,主要是用到了 CSS3 的animateanimate-delay属性。

html 代码如下:

html 复制代码
<div class="container">
  <span style="--i:0"></span>
  <span style="--i:1"></span>
  <span style="--i:2"></span>
  <span style="--i:3"></span>
  <span style="--i:4"></span>
  <span style="--i:5"></span>
  <span style="--i:6"></span>
  <span style="--i:7"></span>
  <span style="--i:8"></span>
  <span style="--i:9"></span>
  <span style="--i:10"></span>
  <span style="--i:11"></span>
  <span style="--i:12"></span>
  <span style="--i:13"></span>
  <span style="--i:14"></span>
  <span style="--i:15"></span>
  <span style="--i:16"></span>
  <span style="--i:17"></span>
  <span style="--i:18"></span>
  <span style="--i:19"></span>
  <span style="--i:20"></span>
  <span style="--i:21"></span>
  <span style="--i:22"></span>
  <span style="--i:23"></span>
  <span style="--i:24"></span>
  <span style="--i:25"></span>
  <span style="--i:26"></span>
  <span style="--i:27"></span>
  <span style="--i:28"></span>
  <span style="--i:29"></span>
  <span style="--i:30"></span>
  <span style="--i:31"></span>
  <span style="--i:32"></span>
  <span style="--i:33"></span>
  <span style="--i:34"></span>
  <span style="--i:35"></span>
  <span style="--i:36"></span>
  <span style="--i:37"></span>
  <span style="--i:38"></span>
  <span style="--i:39"></span>
  <span style="--i:40"></span>
  <span style="--i:41"></span>
  <span style="--i:42"></span>
  <span style="--i:43"></span>
  <span style="--i:44"></span>
  <span style="--i:45"></span>
  <span style="--i:46"></span>
  <span style="--i:47"></span>
  <span style="--i:48"></span>
  <span style="--i:49"></span>
</div>

代码有点冗余,写了 50 个span元素,当然可以使用 javascript 去循环生成,再插入到 DOM中。这段代码就是给每个span元素绑定了--i值,每个span元素就是效果中的变色部分,之所以用--i时方便在设置span元素样式时使用var(--i)变量来给span动态设置样式。

CSS3 代码如下:

html 复制代码
<style>
  span {
    display: inline-flex;
    width: 32px;
    height: 6px;
    background-color: #2c4766;
    border-radius: 8px;
    position: absolute;
    left: 0;
    transform-origin: 128px;
    transform: rotate(calc(var(--i) * (360deg / 50)));
    animation: animateBlink 1s linear infinite; /*执行一秒,匀速执行,循环*/
    animation-delay: calc(
      (var(--i) * (1s / 50))
    ); /*设置动画的延迟执行时间,这样就可以看到渐变的效果*/
  }

  @keyframes animateBlink {
    0% {
      background-color: #0ef;
    }
    25% {
      background-color: #2c4766;
    }
  }
</style>

这段代码总共做了两件事,设置span的旋转角度和定义animateBlink动画并绑定。

旋转 span

通过--i变量设置每个span元素的旋转角度,均匀分布在一个环上。

设置中心点

css 复制代码
transform-origin: [<x-position>] [<y-position>] [<z-position>];

效果如下

动画

这段代码就是定义了一个animateBlink动画, 循环匀速执行动画,动画完全执行一轮时间持续 1s

相关推荐
少年阿闯~~2 天前
CSS3的新特性
前端·javascript·css3
恶猫2 天前
javascript文本长度检测与自动截取,用于标题长度检测
javascript·css·css3·js·自动检测·文本长度
degree5202 天前
CSS :has() 选择器详解:为什么它是“父选择器”?如何实现真正的容器查询?
前端·css·css3
BillKu3 天前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
乖女子@@@4 天前
css3新增-网格Grid布局
前端·css·css3
BUG创建者5 天前
html获取16个随机颜色并不重复
css·html·css3
不爱编程的小方5 天前
响应式布局
前端·css3
Async Cipher5 天前
CSS 居中
前端·css·css3
咔咔一顿操作5 天前
【CSS 3D 交互】实现精美翻牌效果:从原理到实战
前端·css·3d·交互·css3
遗憾随她而去.6 天前
css3的 --自定义属性, 变量
前端·css·css3