CSS動畫是網頁設計中必不可少的一部分。它能夠為用戶帶來一個更加流暢、生動的頁面瀏覽體驗。在本文中，我們將介紹如何使用CSS來制作一個簡單的加載動畫。

.spinner {
position: relative;
width: 64px;
height: 64px;
}
.spinner div {
position: absolute;
top: 0;
left: 28px;
width: 5px;
height: 14px;
border-radius: 20%;
background: #eee;
animation: spinner 1.2s infinite ease-in-out both;
}
.spinner div:nth-child(1) {
animation-delay: -0.45s;
}
.spinner div:nth-child(2) {
animation-delay: -0.3s;
}
.spinner div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes spinner {
0%, 100% {
transform: translateY(0);
}
20% {
transform: translateY(-8px);
}
40% {
transform: translateY(0);
}
}

首先，我們創建了一個名為“spinner”的DIV，用于包裹我們的加載動畫。隨后，我們為其設置了一個相對定位，并且指定了寬度和高度。接下來，我們創建了三個DIV，它們用于展示動畫的每一個Circle形。這些Circle分別設置為絕對定位，其顏色為灰色。

通過為每一個Circle指定不同的延遲時間，我們創建了一種3D效果，用戶體驗更加出色。我們使用了CSS動畫來控制每個Circle的移動，而這個動畫會無限進行下去。這個動畫使用了關鍵幀@keyframe，它讓每個Circle在不同的時間內向上或向下移動。

在該動畫中，每個Circle都是獨立的動作。在一開始，所有Circle的位置都是相同的。在第20%的時間內，我們讓它們向上移動一段距離，然后在第40%的時間內再移動回去。這種動畫可以使得網頁加載變得更加平滑和流暢。

總之，這個加載動畫僅僅是一個簡單的示例。使用類似的技術，您可以創建更為復雜的動畫。我們希望您能夠掌握這個技術，在您的網頁中使用它來提升用戶體驗。