CSS3為網頁開發人員提供了許多炫酷的動畫效果，其中之一就是刷新動畫。刷新動畫可以給用戶帶來一個友好的交互體驗，告訴他們頁面正在加載中。而循環播放刷新動畫，則可以增強用戶的耐心和等待時間。在這篇文章中，我們將學習如何使用CSS3創造一個循環播放的刷新動畫。

/* HTML */
/* CSS */
.refresh-icon{
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
border-radius: 50%;
border: 4px solid rgba(0,0,0,0.1);
border-top-color: #fff;
animation: spin 1s linear infinite;
}
@keyframes spin{
to{transform: rotate(360deg)}
}

以上代碼可以創造出一個簡單的刷新動畫，讓頁面顯得更加友好和活躍。但是目前的動畫只會播放一次，接著便停止在原位，這可能會使用戶誤以為頁面加載完成了。因此，我們需要讓它循環播放。

/* CSS */
.refresh-icon{
/*...省略其他屬性*/
animation: spin 1s linear infinite;
}
@keyframes spin{
to{transform: rotate(360deg)}
from{transform: rotate(0deg)}
}

我們可以使用CSS3中的infinite屬性，來讓動畫無限循環播放。這樣一來，當頁面在加載中時，動畫就會持續播放，讓用戶知道頁面還沒有完成加載。此外，我們還在keyframes中添加了from屬性，讓它回到最初的狀態，以使動畫循環播放。

在使用css3制作循環播放刷新動畫時，我們需要注意以下幾點：

• 使用infinite屬性來讓動畫持續播放。
• 在keyframes中添加from屬性，使動畫循環播放。
• 盡量減小動畫的耗時，不要占用用戶太多的時間。

總之，循環播放的刷新動畫可以增強用戶的耐心，讓他們了解頁面正在加載中。在網站的交互體驗中，這樣的小細節可以讓我們的站點更加友好和專業。