本文目錄導(dǎo)讀：

1. 使用CSS3動(dòng)畫
2. 使用CSS過渡（Transitions）

實(shí)現(xiàn)網(wǎng)頁加載動(dòng)畫（Loading）的CSS方法

在網(wǎng)頁設(shè)計(jì)中，加載動(dòng)畫（Loading）是一種重要的元素，它可以吸引用戶的注意力，提高用戶體驗(yàn)，使用CSS可以實(shí)現(xiàn)各種加載動(dòng)畫效果。

使用CSS3動(dòng)畫

CSS3動(dòng)畫是一種非常強(qiáng)大的技術(shù)，可以實(shí)現(xiàn)各種復(fù)雜的加載動(dòng)畫效果，通過定義關(guān)鍵幀（keyframes），我們可以創(chuàng)建出流暢的動(dòng)畫效果，我們可以使用CSS3動(dòng)畫來制作一個(gè)簡(jiǎn)單的旋轉(zhuǎn)加載動(dòng)畫：

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

在這個(gè)例子中，我們定義了一個(gè)名為"spin"的關(guān)鍵幀動(dòng)畫，使元素在2秒內(nèi)旋轉(zhuǎn)360度，我們將這個(gè)動(dòng)畫應(yīng)用到一個(gè)具有邊框的div元素上，實(shí)現(xiàn)了旋轉(zhuǎn)加載動(dòng)畫的效果。

使用CSS過渡（Transitions）

除了CSS3動(dòng)畫外，我們還可以使用CSS過渡來創(chuàng)建加載動(dòng)畫，過渡是一種在元素狀態(tài)改變時(shí)發(fā)生的動(dòng)畫效果，我們可以使用過渡來制作一個(gè)簡(jiǎn)單的淡入淡出加載動(dòng)畫：

.loader {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.loader.active {
  opacity: 1;
}

在這個(gè)例子中，我們定義了一個(gè)過渡效果，使元素的透明度在2秒內(nèi)從0變化到1，我們將這個(gè)過渡效果應(yīng)用到一個(gè)具有"active"類的div元素上，實(shí)現(xiàn)了淡入淡出加載動(dòng)畫的效果。

通過使用CSS3動(dòng)畫和過渡效果，我們可以輕松地創(chuàng)建出各種加載動(dòng)畫效果，提高用戶體驗(yàn)和吸引用戶的注意力，在實(shí)際應(yīng)用中，我們可以根據(jù)具體的需求和場(chǎng)景來選擇合適的加載動(dòng)畫效果。