本文將介紹一個CSS3實現的無數小圓無限loading的動畫，該動畫具有3D運動效果，適用于一些等待畫面中。

效果圖

demodownload

實例介紹

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;
}

.infinity為動畫定位設置。

.infinity div為圓點容器設置，animation: rotate 實現動畫轉動效果。

.infinity div span為圓點樣式設置，animation: move 實現動畫移動效果。

.infinity div:nth-child(N) 是列舉作用，即是可成一組相似的動畫效果。

總結

本文介紹了CSS3實現的無數小圓無限loading的動畫，該實例動畫具有3D效果，適用于一些等待畫面中。

相關文章

• 純CSS實現的2D/3D Loading加載/進度條動畫
• CSS加載動畫(loading animation)-扭動的圓環
• css3 loading加載動畫圓形/圓周滾動效果【演示/源碼下載】
• 純CSS實現的轉動的圓環加載動畫
• CSS loading加載動畫(旋轉的圓環)
• CSS3 loading預加載動畫旋轉的圓弧【演示/源碼下載】
• 4個漂亮的CSS3 Loading預加載動畫實例
• CSS3 Loading 旋轉圓盤加載動畫
• CSS3 loading音波效果預加載動畫
• CSS3 Loading預加載動畫8個常見實例
• CSS Loading 左右滾動加載動畫等5實例【源碼下載】

標簽: css-loading  css3-loading  加載動畫  動畫