在當今的網頁設計中，頁面加載速度是至關重要的。如果網頁加載速度過慢，用戶可能會失去耐心并離開你的網站。因此，很多網站都會使用加載中動畫效果來吸引用戶的注意力，并在網頁加載時增加一些趣味性。
.loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(250, 250, 250, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading__icon {
width: 60px;
height: 60px;
border-radius: 50%;
border: 5px solid #888;
border-top-color: #EEE;
animation: loading__spin 1s ease-in-out infinite;
}
@keyframes loading__spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}如上所示，上述代碼展示了一個簡單的css加載中動畫效果。首先，我們創建了一個“loading”類，它將
元素的位置設置為全屏，然后將其背景色設置為半透明，并顯示為flex布局，在中央顯示一個成為“loading__icon”的圓形元素。
接下來，我們對“loading__icon”元素進行了樣式設置，其中邊框的寬度和顏色可以調整以適應需求。我們還使用“animation”屬性來定義旋轉動畫，該動畫將標記為等價于“loading__spin”的樣式動畫，其持續時間為1秒，動畫效果為“ease-in-out”，且永久運行。
最后，在“loading__spin”樣式中，我們使用“@keyframes”規則定義了一個簡單的旋轉動畫，該動畫從0度旋轉到360度，使其無限旋轉并產生加載中的效果。
總而言之，這是實現加載中動畫效果的基本步驟。您可以根據自己的需要優化和調整代碼以改善你的用戶體驗。
上一篇css 加黑線
下一篇css 動態 氣泡提示