CSS3加載等待動畫是一種非常實用的功能，可以讓用戶在等待頁面加載的過程中看到一些有趣的動畫，從而提高用戶體驗。在下面的文章中，我們將介紹如何使用CSS3來創(chuàng)建這樣的動畫。 首先，我們需要用CSS3中的animation屬性來創(chuàng)建動畫。這個屬性可以控制元素的動畫效果，包括動畫持續(xù)時間、動畫方式、動畫延遲等等。下面是一個簡單的例子：

.loading{
width: 50px;
height: 50px;
border: 5px solid gray;
border-top: 5px solid white;
border-radius: 50%;
margin: 50px auto;
animation: spin 1s linear infinite;
}
@keyframes spin{
to{
transform: rotate(360deg);
}
}

這個例子中，我們首先定義了一個.loading類，它包括一個圓形邊框和一個白色邊框上的旋轉(zhuǎn)動畫。然后我們使用@keyframes規(guī)則定義了一個名為spin的動畫，它將元素從當(dāng)前的位置旋轉(zhuǎn)360度。 接下來，我們可以將這個動畫應(yīng)用到任何需要等待加載的元素上。例如，我們可以將這個動畫應(yīng)用到一個加載按鈕上：

<button class="loading">加載中...</button>

這樣，當(dāng)用戶點擊這個按鈕并等待頁面加載時，他們將看到這個按鈕在不斷旋轉(zhuǎn)，以表明頁面正在加載。 除了這個基本的旋轉(zhuǎn)動畫，我們還可以使用其他的CSS3動畫效果，以創(chuàng)建更復(fù)雜的加載等待動畫。例如，我們可以使用縮放效果來顯示一個無限循環(huán)的脈沖加載動畫：

.pulse{
width: 50px;
height: 50px;
border-radius: 50%;
margin: 50px auto;
position: relative;
animation: pulse 1s ease-in-out infinite;
}
.pulse:before{
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: gray;
position: absolute;
top: 0;
left: 0;
animation: pulse-before 1s ease-in-out infinite;
}
@keyframes pulse{
0%{
transform: scale(0);
}
100%{
transform: scale(1);
}
}
@keyframes pulse-before{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}

這個例子中，我們定義了一個名為pulse的類，它包括一個圓形邊框和一個灰色的內(nèi)部元素。我們還定義了一個名為pulse-before的偽元素，它用兩個動畫效果來創(chuàng)建一個閃爍的效果。 最后，我們可以將這個動畫應(yīng)用到任何需要等待加載的元素上。例如，我們可以將這個動畫應(yīng)用到一個圖片上：

<img src="myimage.jpg" class="pulse" alt="my image">

這樣，當(dāng)圖片正在加載時，用戶將看到一個不斷閃爍的圓形，以表明圖片正在加載。 綜上所述，CSS3加載等待動畫是一個非常實用的功能，可以在等待頁面加載的過程中提高用戶體驗。通過使用不同的CSS3動畫效果，我們可以創(chuàng)建各種不同的加載等待動畫，以滿足不同的需求。