在網(wǎng)頁設計中，CSS 是一項非常重要的技術(shù)。通過 CSS，我們可以潤色得更漂亮，提高網(wǎng)頁的觀賞性。然而，在 CSS 加載的過程中，頁面會出現(xiàn)短暫的白屏現(xiàn)象，這往往會影響用戶的體驗。為了解決這個問題，我們可以使用 CSS 加載時動畫。

body {
display: none;
}
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #f5f5f5;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.loading .spinner {
width: 40px;
height: 40px;
border: 5px solid rgba(0, 0, 0, 0.1);
border-top-color: #666;
border-radius: 50%;
animation: spin 0.6s ease-in-out infinite;
}
.loading .spinner::after {
content: "";
display: block;
width: 20px;
height: 20px;
margin: -12.5px 0 0 -12.5px;
border-radius: 50%;
background-color: #f5f5f5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

以上代碼是一個簡單的 CSS 加載時動畫。首先，我們在 `` 中添加了 `display: none;` 的樣式，這樣頁面加載時就不會出現(xiàn)白屏現(xiàn)象。然后，在 CSS 加載前，我們添加了一個 `