CSS（層疊樣式表）是一種用于描述網頁文檔如何呈現的標記語言。在網頁設計中，經常需要增加一些特效來提升頁面的視覺效果。其中，光暈和旋轉是常見的特效之一。通過使用CSS的div元素和相關屬性，我們可以輕松地實現光暈和旋轉效果。
<div>元素是HTML中的一個重要標簽，用于定義文檔的一個分區或一個局部區域。通過使用CSS，我們可以為<div>元素應用樣式，并實現各種特效。光暈效果可以給一個元素增加類似光暈的外發光效果，而旋轉則可以讓元素以旋轉的方式動態呈現。
下面我們通過幾個代碼案例來詳細解釋如何實現光暈和旋轉效果。
案例1：光暈效果

，我們需要為<div>元素設置一個背景色，并將其邊框模糊化以達到光暈的效果。

<code>
.glow {
background-color: #fff;
box-shadow: 0 0 20px #fff;
}
</code>

通過上述代碼，我們為名為"glow"的<div>元素設置了一個白色(#fff)的背景色，并使用box-shadow屬性為其添加了一個20像素的白色(#fff)光暈效果。你可以根據需要調整背景色和光暈的大小。

案例2：旋轉效果

旋轉效果可以通過CSS的transform屬性實現。我們可以為元素添加一個旋轉角度，使其動態旋轉。

<code>
.rotate {
animation: rotate 4s linear infinite;
}
<br>
    @keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</code>

通過上述代碼，我們為名為"rotate"的<div>元素設置了一個旋轉動畫。使用animation屬性，我們將名為"rotate"的動畫應用于元素，并將其旋轉角度設置為從0度到360度。通過linear參數，我們可以讓旋轉效果以線性速度進行。通過infinite參數，我們可以讓旋轉動畫無限循環。你可以根據需要調整動畫的時間、旋轉角度和速度。

參考其他文章真實案例：

這里我們舉個實際案例來更好地了解如何實現光暈和旋轉效果。

<code>
.glow-rotate {
background: radial-gradient(circle, #ff9595, rgba(255, 149, 149, 0));
animation: rotate 3s linear infinite;
}
<br>
    @keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</code>

在上述代碼中，我們使用了radial-gradient屬性為名為"glow-rotate"的<div>元素創建了一個徐徐消退的紅色光暈。同時，我們也為該元素添加了一個旋轉動畫，以增加動感。通過調整背景色和動畫的參數，你可以創建出自己滿意的效果。

：

通過上述代碼案例，我們可以看到，使用CSS的<div>元素和相關屬性可以輕松實現光暈和旋轉效果。通過調整代碼中的參數，我們可以創建出各種自定義的光暈和旋轉特效，以增加網頁的視覺吸引力。