近年來，隨著互聯網的發展，加載速度的優化越來越重要，而在等待網頁內容加載的過程中，通常我們會看到一個加載中的動畫效果，為用戶提供更好的交互和用戶體驗。本文將介紹如何使用CSS實現一個簡單的加載中動畫效果。

.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loading::before {
content: '';
display: inline-block;
width: 10px;
height: 10px;
margin: 10px;
border-radius: 50%;
background-color: #333;
animation: loading 1s ease-in-out infinite;
}
@keyframes loading {
0% {
transform: scale(0.4);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.4);
opacity: 0.7;
}
}

以上代碼實現了一個簡單的加載中動畫效果，將代碼放置在HTML中，使用loading類包裹需要加載的內容即可。

<div class="loading">
<p>加載中...</p>
</div>

通過CSS實現加載中動畫效果是一種簡單、便捷且不需要額外的插件的方法，通過代碼的修改可以實現不同的效果，為網頁交互提供更好的體驗。