CSS3循環(huán)動(dòng)畫是一種無限循環(huán)的動(dòng)畫，可以讓你的網(wǎng)頁更加生動(dòng)，增添頁面上的藝術(shù)性。使用CSS3編寫循環(huán)動(dòng)畫可以幫助你在網(wǎng)頁上實(shí)現(xiàn)更多的效果。下面我們將介紹如何使用CSS3創(chuàng)建循環(huán)動(dòng)畫。

@keyframes spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
border-radius: 50%;
border: 10px solid #ccc;
animation: spin 2s linear infinite;
}

上面這段代碼使用了CSS3的關(guān)鍵幀動(dòng)畫（@keyframes）和動(dòng)畫屬性（animation），實(shí)現(xiàn)一個(gè)簡(jiǎn)單的旋轉(zhuǎn)動(dòng)畫。關(guān)鍵幀動(dòng)畫定義了一個(gè)將被動(dòng)畫效果調(diào)用的動(dòng)畫序列，動(dòng)畫屬性定義了動(dòng)畫的周期、運(yùn)動(dòng)曲線和名稱。

在這段代碼中，我們定義一個(gè)名為spin的循環(huán)動(dòng)畫，它是一個(gè)從0%到100%的變形動(dòng)畫，從0度開始旋轉(zhuǎn)，持續(xù)時(shí)間為2秒，并且是線性運(yùn)動(dòng)的。同時(shí)，盒子（class為box）將被應(yīng)用這個(gè)動(dòng)畫，并且無限循環(huán)地旋轉(zhuǎn)。

使用CSS3編寫循環(huán)動(dòng)畫非常容易，它甚至可以應(yīng)用于不同的元素和場(chǎng)景。使用這些技能可以幫助你創(chuàng)建出更好的動(dòng)態(tài)頁面效果。