CSS如何做loading 在前端開發中，loading是比較常用的特效之一。通過使用CSS，我們可以實現各種各樣的loading效果。下面我們就來詳細介紹一下如何使用CSS來做loading。 1. 使用CSS動畫 我們可以使用CSS動畫來實現loading效果。下面是一個簡單的示例：

/* 定義動畫 */ 
@keyframes loading { 
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); } 
} 
/* 使用動畫 */ 
.loading { 
display: inline-block; 
width: 20px; 
height: 20px; 
border: 3px solid #3498db; 
border-top-color: transparent; 
border-radius: 50%; 
animation: loading 0.8s linear infinite; 
}

2. 使用偽元素和transform 我們還可以使用偽元素和transform來實現loading效果。下面是一個示例：

.loading { 
position: relative;  
width: 40px;  
height: 40px;  
border-radius: 50%;  
border: 4px solid #f00;  
margin: 50px auto;  
animation: rotate 2s linear infinite;  
}
.loading:before, .loading:after {  
content: "";  
position: absolute;  
width: 20px;  
height: 20px;  
border-radius: 50%;  
border: 4px solid #f00;  
top: -10px;  
left: -10px;  
animation: rotate 2s linear infinite;  
} 
.loading:before {  
animation-delay: 0.5s;  
} 
@keyframes rotate {  
0% { tranform: rotate(0deg); }  
100% { tranform: rotate(360deg); }  
}

在這個示例中，我們使用了偽元素:before和:after，分別用來實現兩個圓點的旋轉。我們通過旋轉這些圓點，來實現整個loading效果的動態。 總結 通過使用CSS，我們可以實現各種各樣的loading效果。我們可以使用CSS動畫、偽元素和transform等技術來實現這些效果。同時，我們也可以自定義loading的樣式，來滿足不同的需求。