CSS3实现的无数小圆无限loading的加载动画（3D效果）

技术频道 - html技术

CSS3实现的无数小圆无限loading的加载动画（3D效果）

作者:admin 时间:2023-4-8 10:10:57 浏览:

本文将介绍一个CSS3实现的无数小圆无限loading的动画，该动画具有3D运动效果，适用于一些等待画面中。

效果图

CSS3实现的3D空间无数小球无限loading动画

demo download

实例介绍

CSS3实现的，很多小圆球无限移动，有的从大变小直至消失，整个画面看似一个3D立体动画。

HTML代码

<!-- Chrome浏览器 -->
<div class="infinityChrome">
    <div></div>
    <div></div>
    <div></div>
</div>

<!-- 其他浏览器 -->
<div class="infinity">
    <div>
        <span></span>
    </div>
    <div>
        <span></span>
    </div>
    <div>
        <span></span>
    </div>
</div>

HTML结构很简单，用一个div标签作为动画盒子，里面含有三个div。

里面的三个div其实是三个独立的动画。

如果里面只有一个div，如代码：

<div class="infinityChrome">
    <div></div>
</div>

那么动画是这样

如果里面是两个div，如代码：

<div class="infinityChrome">
    <div></div>
    <div></div>
</div>

那么动画是这样

当里面是三个div时，看到的就是本文开头的动画了。

CSS代码

CSS代码主要如下（部分），随后给予相应的解释。

.infinity {
  width: 120px;
  height: 60px;
  position: relative;
}
.infinity div,
.infinity span {
  position: absolute;
}
.infinity div {
  top: 0;
  left: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: rotate 6.9s linear infinite;
          animation: rotate 6.9s linear infinite;
}
.infinity div span {
  left: -8px;
  top: 50%;
  margin: -8px 0 0 0;
  width: 16px;
  height: 16px;
  display: block;
  background: #8C6FF0;
  box-shadow: 2px 2px 8px rgba(140, 111, 240, 0.09);
  border-radius: 50%;
  transform: rotate(90deg);
  -webkit-animation: move 6.9s linear infinite;
          animation: move 6.9s linear infinite;
}
.infinity div span:before, .infinity div span:after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  background: inherit;
  top: 50%;
  left: 50%;
  margin: -7px 0 0 -7px;
  box-shadow: inherit;
}
.infinity div span:before {
  -webkit-animation: drop1 0.8s linear infinite;
          animation: drop1 0.8s linear infinite;
}
.infinity div span:after {
  -webkit-animation: drop2 0.8s linear infinite 0.4s;
          animation: drop2 0.8s linear infinite 0.4s;
}
.infinity div:nth-child(2) {
  -webkit-animation-delay: -2.3s;
          animation-delay: -2.3s;
}
.infinity div:nth-child(2) span {
  -webkit-animation-delay: -2.3s;
          animation-delay: -2.3s;
}
.infinity div:nth-child(3) {
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
}
.infinity div:nth-child(3) span {
  -webkit-animation-delay: -4.6s;
          animation-delay: -4.6s;
}