CSS是網頁設計過程中不可或缺的一部分，它不僅能使網頁布局更加美觀，還能添加許多有趣而實用的效果。其中之一就是加載效果，今天我們就來學習如何使用CSS寫出一個簡單的加載效果源碼。

.loader {
position: relative;
width: 64px;
height: 64px;
border-radius: 100%;
overflow: hidden;
}
.loader::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
background: #fff;
border-radius: 100%;
animation: loaderAnimation 0.8s linear infinite;
}
@keyframes loaderAnimation {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.4;
}
50% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.4;
}
}

通過上面的代碼，我們創建了一個名為“loader”的 div元素，寬高均為64px，并使用border-radius屬性把 div元素設置為圓形。同時，我們使用 overflow: hidden屬性來隱藏 div元素中內容的溢出。

loader::after偽元素將用來表示加載時的動畫效果，他先用content: ""屬性創建一個空內容塊，接著使用position: absolute屬性來將它定位在父元素div的中央。通過使用transform: translate(-50%, -50%)實現居中對齊。

加上了animation: loaderAnimation 0.8s linear infinite; 之后，我們進入到動畫細節的部分，loaderAnimation將用來描述動畫如何執行。通過設定關鍵幀，我們實現了一個“縮放+透明度”的聯合動畫。具體來說，@keyframes loaderAnimation得到以下的定義：

@keyframes loaderAnimation {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0.4;
}
50% {
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.4;
}
}

0%時，物體縮小至0，透明度為0.4；50%時，透明度達到 1；100%時，物體放大至原來的大小，透明度回落至0.4

最后，通過在HTML文件中添加以下代碼，就能夠輕松地在網頁中使用我們創建的加載效果：

<div class="loader"></div>

在使用加載效果的時候，可以根據實際的需要來調節 loader的顏色和大小。通過組合和修改代碼，你也可以創造出更多有趣和獨特的加載效果，逐漸提高你的CSS技能水平。