如果你經常使用互聯網，那么你一定注意到了許多網站在加載時會有一個默認的動畫效果，這個效果通常是一個旋轉的圓圈或是進度條。這種效果的實現是通過 CSS 來完成的，如果你也想在你的網站上添加這樣的效果，那么你需要學習如何編寫 CSS。

.loader {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
border-radius: 50%;
opacity: .5;
}
.loader:before {
width: 100%;
height: 100%;
background-color: #5dc5ef;
animation: spin 1s linear infinite;
}
.loader:after {
width: 80%;
height: 80%;
background-color: #419bbc;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

這個 CSS 代碼塊創建了一個名為“loader”的 div 元素，這個元素是固定定位到屏幕中心的。它使用了 CSS3 的動畫來旋轉它的兩部分，因此看起來就像是一個正在加載的進度圈。

你可以修改這個 CSS 代碼來改變進度圓的顏色、大小和速度，讓它更加符合你的網站的設計。你也可以使用其他圖形，如進度條或其他形狀的加載效果來代替進度圓。

網頁載入默認動畫的添加可以提升用戶體驗，讓用戶想要繼續等待網頁的載入，而且這種動畫效果的添加非常簡單，只需要少量的 CSS 代碼就可以完成了。