<div>標簽是HTML中的一個重要標簽，用于在網頁中創建一個容器，可以包含其他HTML元素。除此之外，<div>標簽還可以通過CSS樣式控制其顯示效果。其中一個有趣的效果是讓<div>標簽不停地旋轉。在這篇文章中，我將通過幾個代碼案例來詳細講解如何實現這個效果。</div>

案例一：

<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 5s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<br>
<div class="box"></div>

在上述代碼中，我們創建了一個名為"box"的類，并為該類定義了樣式。我們設置了盒子的寬度和高度，背景顏色為紅色，并且通過CSS的animation屬性來實現旋轉效果。animation屬性接受四個參數，分別是動畫名稱、動畫持續時間、動畫循環次數和動畫速度曲線。在這里，我們將動畫名稱設置為"rotate"，動畫持續時間為5秒，循環次數設為無限，速度曲線為線性。

接著，在@keyframes規則中定義了動畫的關鍵幀。關鍵幀是指在動畫持續時間內的某些時間點上元素的樣式狀態。我們通過transform屬性來實現旋轉效果，初始狀態是旋轉角度為0度，最終狀態是旋轉角度為360度，這樣就形成了從起始狀態到結束狀態的過渡效果。

案例二：

<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
.box:after {
content: '';
display: block;
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: rotate 5s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<br>
<div class="box"></div>

在這個案例中，我們使用了相同的旋轉效果，但是將其應用到了一個偽元素上。，我們創建了一個類名為"box"的<div>元素，并定義了它的樣式，包括寬度、高度等。接下來，我們使用:after偽元素選擇器來向.box元素的后面添加一個偽元素。

我們給偽元素設置了內容為空字符串，將其顯示設置為塊級元素，定義了它的寬度和高度，并且將其背景顏色設置為紅色。然后，通過絕對定位將偽元素放置在.box元素的中心位置，并設置了一個translate變換，使偽元素在自身的中心點進行旋轉。

最后，我們將旋轉動畫應用到了偽元素上，實現了不停旋轉的效果。在這個案例中，通過使用偽元素，我們可以在不改變原始<div>元素樣式的同時將旋轉效果應用到某個特定的元素上。

以上是關于如何使用<div>標簽實現不停旋轉效果的兩個案例。通過設置不同的樣式和使用不同的選擇器，我們可以創建出各式各樣的旋轉效果。希望這篇文章能夠幫助你更好地理解和運用<div>標簽的旋轉功能。