純CSS動畫加載圖標越來越受歡迎。沒有必要使用復雜的JavaScript代碼或其他庫來創建這些效果。只需使用CSS就可以創造出美觀、獨特的加載動畫。下面我們來看一些例子。

.spinner {
border: 3px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #3498db;
height: 25px;
width: 25px;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}

以上代碼可以創建出一個簡單的旋轉加載圖標。通過使用CSS邊框和邊框顏色來創建該圖標，并通過使用“animation”屬性指定旋轉動畫。

.loader {
position: relative;
height: 4px;
width: 100%;
background-color: #ddd;
}
.loader:before {
content: "";
position: absolute;
height: 100%;
width: 40%;
background-color: #3498db;
animation: loading 2s ease-out 0s infinite;
}
@keyframes loading {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(100%);
}
100% {
transform: translateX(100%);
}
}

以上代碼創建了另一種加載圖標。通過使用偽元素“:before”在一個具有縮放動畫的不透明背景中顯示一個加載條。

總之，通過簡單的CSS代碼就可以創建出有趣且獨特的加載動畫，這種方式比使用JavaScript更加有效和易于實現。