卡卡網(wǎng)

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

效果圖

demodownload

實(shí)例介紹

CSS3實(shí)現(xiàn)的，很多小圓球無(wú)限移動(dòng)，有的從大變小直至消失，整個(gè)畫(huà)面看似一個(gè)3D立體動(dòng)畫(huà)。

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)很簡(jiǎn)單，用一個(gè)div標(biāo)簽作為動(dòng)畫(huà)盒子，里面含有三個(gè)div。

里面的三個(gè)div其實(shí)是三個(gè)獨(dú)立的動(dòng)畫(huà)。

如果里面只有一個(gè)div，如代碼：

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

那么動(dòng)畫(huà)是這樣

如果里面是兩個(gè)div，如代碼：

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

那么動(dòng)畫(huà)是這樣

當(dāng)里面是三個(gè)div時(shí)，看到的就是本文開(kāi)頭的動(dòng)畫(huà)了。

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為動(dòng)畫(huà)定位設(shè)置。

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

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

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

總結(jié)

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

相關(guān)文章

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

標(biāo)簽: css-loading  css3-loading  加載動(dòng)畫(huà)  動(dòng)畫(huà)