CSS3是一種實現各種精美效果的強大的樣式語言，它為用戶帶來了許多優美的視覺體驗。其中之一就是實現加載效果，今天我們就來學習一下如何使用CSS3實現加載效果。

.loading {
display: flex;
justify-content: center;
align-items: center;
}
.loading:after {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 5px solid rgba(0, 0, 0, 0.2);
border-top-color: #fff;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

我們首先創建一個容器，然后設置他的display屬性為flex，以便使得它的內容在容器中垂直和水平居中。接著我們使用偽元素：after來制作加載的效果。我們設置偽元素的內容為空，把它的display設置為block，設置它的尺寸、邊框形狀和顏色，這樣就做出來了一個圓圈的樣子。

最后我們使用@keyframes來定義旋轉的動畫。我們把偽元素從0度轉到360度，動畫時間為1秒，設置為無限循環，這樣就制作出了一個圓形的旋轉加載效果。

在需要顯示加載效果的時候，只需要在對應的元素上加上class="loading"就可以了。