CSS（Cascading Style Sheets）是一種用來美化網(wǎng)站界面的技術(shù)，它提供了各種各樣的樣式選項，從顏色到排版、從字體到背景等等。在很多網(wǎng)站設(shè)計中，我們可以看到各種酷炫的加載動畫效果。這篇文章將向您展示如何使用CSS來創(chuàng)建您自己的加載動畫。

.loader {
width: 50px;
height: 50px;
border-radius: 50%;
margin: 100px auto;
}
.loader:before,
.loader:after {
content: '';
width: inherit;
height: inherit;
border-radius: 50%;
position: absolute;
opacity: 0;
transform: translate(-50%, -50%);
animation: animate 2s linear infinite;
}
.loader:before {
border: 4px solid crimson;
animation-delay: 0.5s;
}
.loader:after {
border: 4px solid orange;
animation-delay: 1s;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(2);
opacity: 0;
}
}

上面的代碼創(chuàng)建了一個簡單的圓形加載器。首先，我們創(chuàng)建了一個圓形的div元素，給它一個50像素的寬和高，一個50%的邊框半徑，以及margin屬性讓其相對于頁面頂部垂直居中。然后，我們使用:before和:after偽元素來創(chuàng)建兩個圓形的 “裝飾” 元素。作為 :before 的樣式，我們設(shè)置4像素的深色邊框，為了產(chǎn)生一個深色的內(nèi)圓，用 :after 的樣式同樣方式，我們設(shè)置一個淺色的內(nèi)圓。最后，我們使用keyframes來設(shè)置動畫。動畫從初始位置開始，通過transform屬性在2秒內(nèi)令圓形的大小縮放兩倍，并將不透明性從1（不透明）到0（透明）。使用animation-delay屬性讓淺色 :after 元素先于深色 :before 元素加載。

CSS動畫是可以無限擴展的，你可以通過更多樣的變體來創(chuàng)建更多的酷炫動畫效果，希望本文可以幫助您激發(fā)創(chuàng)意，創(chuàng)造令人印象深刻的加載動畫效果。