CSS小程序加載動畫

/*定義loading動畫*/
@keyframes loading {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
/*定義loading動畫的父容器*/
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/*定義loading動畫的子容器*/
.loader div {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 5px;
animation: loading 0.8s linear infinite;
border: 5px solid #74b9ff;
border-top-color: transparent;
}
/*HTML結構*/
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>

如何實現這個動畫

首先，我們需要定義一個動畫，這個動畫是通過旋轉來實現的，rotateZ是其中一個角度定義，該值表示元素沿著z軸的旋轉程度，通過不斷旋轉，來實現轉圈。

接著，我們需要定義一個父元素和三個子元素，因為我們要展示三個球從不同的位置開始旋轉，所以子元素的位置需要設置不同的margin值，使我們的三個小球呈現出類似于旋轉的橙色圖標的樣子。

最后，在子元素上應用我們定義的動畫，通過設置動畫時間，達到旋轉的效果，并設置是無限循環的效果，從而實現我們的效果。

最終，在HTML中引入相關CSS即可實現我們的加載動畫。