使用 CSS 設置加載動畫效果 在網站開發過程中，優秀的用戶體驗常常意味著一個站點的成功，其中之一是快速頁面加載速度。然而，即使是很快的網頁加載時間，缺乏視覺反饋也可能讓用戶感覺不爽。因此，一個有吸引力的加載動畫效果可以幫助提升用戶體驗。 在本文中，我們將展示如何使用 CSS 創建簡單的加載動畫效果。 首先，我們需要使用 HTML 代碼包含要顯示的內容（例如圖片、文本等），并為其創建一個加載動畫層：

<div class="load-container">
<div class="loading"></div>
<!-- 要顯示的內容 -->
<p> 這是要顯示的內容 </p>
</div>

接下來，我們需要為這個加載動畫層創建一些 CSS 樣式。下面的代碼演示了如何使用 CSS，制作一個簡單的圓形加載動畫。

.load-container {
position: relative;
display: inline-block;
}
.loading {
box-sizing: border-box;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid rgba(0, 0, 0, 0.1);
border-top-color: #3498db;
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

這里的 .load-container 類定義了一個 “相對定位” 的 CSS 屬性，它用于讓包裹著要顯示的內容的 div 容器居中。 .loading 類則定義了一些 CSS 屬性，包括 position: absolute，使其可以放置在 .load-container 容器內的上方。其大小和形狀使用 border-radius: 50% 創建了一個圓形，而旋轉動畫使用了 CSS 動畫 @keyframes。最后，border-top-color: #3498db 使圓形輪廓線上的一部分采用特定的、動態的顏色，給人一種正在加載的視覺反饋。 使用這些 CSS 樣式后，我們就可以看到簡單的圓形加載動畫效果了。 通過使用 CSS 創建一個優秀的加載動畫層，我們可以從靜態且缺乏反饋的頁面變成一個視覺上更加有吸引力的動態頁面。以上介紹的 CSS 樣式只是一個簡單的例子，而你可以通過自己想象，以及使用更多的 CSS 樣式和屬性，來改進自己的加載動畫效果。