在網頁設計中，動畫效果是非常重要的，能夠使網頁更加生動有趣。CSS旋轉動畫是一種常見的動畫效果，它能夠給網頁帶來一些新鮮的風格，下面我們來看一下如何實現CSS旋轉動畫。

/* 添加CSS代碼 */
.box{
width: 200px;
height: 200px;
background-color: #999;
position: relative;
animation: rotate 2s infinite linear;
}
.box:before{
content: '';
width: 10px;
height: 100px;
background-color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
animation: rotateLine 2s infinite linear;
}
@keyframes rotate {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes rotateLine {
from{
transform: rotate(0deg);
}
to{
transform: rotate(-360deg);
}
}

代碼中，我們首先定義了.box的樣式，其寬度和高度分別為200px，背景顏色為#999，position屬性為relative，這是為了讓后面的絕對定位生效。接下來我們使用關鍵幀動畫（@keyframes）定義了一個名為rotate的動畫，其從0°旋轉到360°。最后我們在.box上添加了兩個動畫，第一個是rotate動畫，即讓整個盒子旋轉；第二個是rotateLine動畫，其效果是讓盒子里面的豎線旋轉（通過偽元素before實現）。