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

.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);
}
}

以上代碼可以創(chuàng)建出一個(gè)簡(jiǎn)單的旋轉(zhuǎn)加載圖標(biāo)。通過使用CSS邊框和邊框顏色來創(chuàng)建該圖標(biāo)，并通過使用“animation”屬性指定旋轉(zhuǎn)動(dòng)畫。

.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%);
}
}

以上代碼創(chuàng)建了另一種加載圖標(biāo)。通過使用偽元素“:before”在一個(gè)具有縮放動(dòng)畫的不透明背景中顯示一個(gè)加載條。

總之，通過簡(jiǎn)單的CSS代碼就可以創(chuàng)建出有趣且獨(dú)特的加載動(dòng)畫，這種方式比使用JavaScript更加有效和易于實(shí)現(xiàn)。