卡卡網(wǎng)

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

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

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

效果圖

demodownload

實例介紹

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

HTML代碼

<label class="loading">
    <input type="checkbox" checked>
    <div>
        <span>Loading...</span>
        <span>點擊觀看</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ū)域是一個label標簽， input標簽當為checked時是3D，否則為2D。

loading盒子是一個div標簽，里面的兩個span標簽是文字標簽，ul標簽是矩形容器。
 

CSS代碼

.loading為整個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實現(xiàn)的2D和3D Loading加載/進度條動畫，本實例著重介紹loading樣式，如果你想做一些交互，比如只顯示60%的loading進度，那么你需要編寫一些JavaScript程序來控制。

相關(guān)文章

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

標簽: css  css-loading  css3-loading  加載動畫  動畫進度條  進度條  矩形進度條