卡卡網(wǎng)

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

效果圖

demodownload

實(shí)例介紹

CSS3實(shí)現(xiàn)的，很多小圓球無限移動，有的從大變小直至消失，整個畫面看似一個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結(jié)構(gòu)很簡單，用一個div標(biāo)簽作為動畫盒子，里面含有三個div。

里面的三個div其實(shí)是三個獨(dú)立的動畫。

如果里面只有一個div，如代碼：

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

那么動畫是這樣

如果里面是兩個div，如代碼：

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

那么動畫是這樣

當(dāng)里面是三個div時，看到的就是本文開頭的動畫了。

CSS代碼

CSS代碼主要如下（部分），隨后給予相應(yīng)的解釋。

.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為動畫定位設(shè)置。

.infinity div為圓點(diǎn)容器設(shè)置，animation: rotate 實(shí)現(xiàn)動畫轉(zhuǎn)動效果。

.infinity div span為圓點(diǎn)樣式設(shè)置，animation: move 實(shí)現(xiàn)動畫移動效果。

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

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: css-loading  css3-loading  加載動畫  動畫