CSS3是網(wǎng)頁設(shè)計(jì)中非常重要的一個技術(shù)，它為我們帶來了許多創(chuàng)新的效果和動畫。本文將介紹一種基于CSS3實(shí)現(xiàn)的三角旋轉(zhuǎn)動畫。

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #f00;
border-bottom: 50px solid transparent;
position: relative;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

以上就是實(shí)現(xiàn)三角形旋轉(zhuǎn)動畫的代碼。首先，我們創(chuàng)建了一個三角形的元素，設(shè)置它的寬和高都為0，用border設(shè)置了三角形的樣式，同時(shí)將它的位置設(shè)為relative，這樣我們可以方便地對它進(jìn)行定位和旋轉(zhuǎn)操作。接下來，我們使用CSS3中的animation屬性，設(shè)定了一個名為rotate的動畫，用于對三角形進(jìn)行旋轉(zhuǎn)的操作。我們通過@keyframes關(guān)鍵字定義了動畫的兩個狀態(tài)：0%代表三角形不旋轉(zhuǎn)時(shí)的狀態(tài)，100%則代表它旋轉(zhuǎn)完成的狀態(tài)。

最后，請注意，我們將動畫的循環(huán)次數(shù)設(shè)置為無限次（infinite），這樣三角形就可以一直旋轉(zhuǎn)下去，直至頁面關(guān)閉。