卡卡網(wǎng)

關(guān)于loading動(dòng)畫之前也介紹過一些，但是3D loading動(dòng)畫介紹的不多，如：

• CSS加載動(dòng)畫(loading animation)-扭動(dòng)的圓環(huán)
• css3 loading加載動(dòng)畫圓形/圓周滾動(dòng)效果【演示/源碼下載】
• 純CSS實(shí)現(xiàn)的轉(zhuǎn)動(dòng)的圓環(huán)加載動(dòng)畫

本文介紹一個(gè)CSS實(shí)現(xiàn)的3D Loading加載動(dòng)畫，這個(gè)其實(shí)也可以作為進(jìn)度條使用。

效果圖

demodownload

實(shí)例介紹

CSS實(shí)現(xiàn)的2D和3D加載動(dòng)畫，使用顏色填充矩形，表示從0%到100%的完成過程。該矩形盒子可以是2D，即是水平方向，也可以是3D（縱向方向）。

HTML代碼

<label class="loading">
    <input type="checkbox" checked>
    <div>
        <span>Loading...</span>
        <span>點(diǎn)擊觀看</span>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</label>

loading區(qū)域是一個(gè)label標(biāo)簽， input標(biāo)簽當(dāng)為checked時(shí)是3D，否則為2D。

loading盒子是一個(gè)div標(biāo)簽，里面的兩個(gè)span標(biāo)簽是文字標(biāo)簽，ul標(biāo)簽是矩形容器。
 

CSS代碼

.loading為整個(gè)loading區(qū)域容器的定位，它定義了一些css變量。

.loading > div為loading的盒子，內(nèi)含.loading > div span和.loading > div ul等樣式設(shè)置。

CSS代碼（部分）：

.loading {
  --load: 10000ms;
  --border: #646B8C;
  --background: #fff;
  --background-perspective: #F6F8FF;
  --active: #5C86FF;
  margin: 52px 0;
}
.loading > div {
  transform: perspective(var(--p)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s;
  transform-style: preserve-3d;
  position: relative;
  cursor: pointer;
}
.loading > div span {
  display: block;
  color: var(--c, #404660);
  line-height: 23px;
  font-size: var(--s, 16px);
  font-weight: 500;
  margin-bottom: 8px;
}
.loading > div ul {
  width: 360px;
  height: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.loading > div ul li {
  --ry: 0deg;
  --z: 0;
  --x: 0;
  transform: rotateY(var(--ry)) translateZ(var(--z)) translateX(var(--x));
  transform-origin: 0 0;
}

總結(jié)

本文介紹了CSS實(shí)現(xiàn)的2D和3D Loading加載/進(jìn)度條動(dòng)畫，本實(shí)例著重介紹loading樣式，如果你想做一些交互，比如只顯示60%的loading進(jìn)度，那么你需要編寫一些JavaScript程序來控制。

相關(guān)文章

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

標(biāo)簽: css  css-loading  css3-loading  加載動(dòng)畫  動(dòng)畫進(jìn)度條  進(jìn)度條  矩形進(jìn)度條