CSS拖欠交替旋轉(zhuǎn)兩次是一種比較實用的動態(tài)效果，在實現(xiàn)單個元素循環(huán)旋轉(zhuǎn)的基礎(chǔ)上，再添加了交替旋轉(zhuǎn)的效果，使頁面更有生機(jī)和動感，能夠吸引更多用戶的關(guān)注和點擊。

.rotate {
width: 50px;
height: 50px;
background-color: #f00;
animation: rotate 2s linear infinite;
}
.rotate:nth-child(2n) {
animation-direction: reverse;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

通過以上CSS代碼的實現(xiàn)，我們就可以達(dá)到兩個元素之間交替旋轉(zhuǎn)的效果。其中，rotate類設(shè)置了旋轉(zhuǎn)效果的基礎(chǔ)屬性，通過animation屬性定義了旋轉(zhuǎn)的動畫效果，即rotate動畫，循環(huán)時間為2秒，動畫軌跡為線性，實現(xiàn)無限循環(huán)。

在后續(xù)操作中，我們通過:nth-child偽類來對旋轉(zhuǎn)的元素進(jìn)行分組，對于2的倍數(shù)元素（即:nth-child(2n)），我們定義動畫的播放方向為reverse，即反向進(jìn)行動畫播放，實現(xiàn)兩個元素之間的交替旋轉(zhuǎn)效果。

最后，通過@keyframes定義動畫的播放軌跡，從0%到100%的過程中，通過transform實現(xiàn)元素的旋轉(zhuǎn)，從而達(dá)到這個旋轉(zhuǎn)效果！