在網頁設計中，加載動畫可以增強用戶體驗。本文將介紹如何使用CSS實現加載動畫。

//HTML結構
<div class="loading">
<div class="loading-circle"></div>
</div>
//CSS樣式
.loading {
width: 100%;
height: 100%;
background-color: #f4f4f4;
position: fixed;
top: 0; left: 0;
}
.loading-circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid transparent;
border-top-color: #2db9e9;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation: loading-rotate 1.5s infinite linear;
}
@keyframes loading-rotate {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}

上述代碼實現了一個加載動畫，使用了一個圓環和CSS3的動畫屬性。我們需要一個父級元素loading，它可以是整個頁面或者一個部分。其子元素loading-circle就是我們的加載動畫，我們使它旋轉，達到加載效果。其中，loading-circle使用了定位，位于loading的中央。

使用CSS實現加載動畫的方法很多，我們可以根據自己的需求進行修改和創新。希望本文能對你有所幫助。