CSS是一種強大的樣式表語言，可以用來控制網頁的布局和樣式。使用一些基本的 CSS 屬性可以讓一個普通的 HTML 元素變得更加生動、有趣。

在這篇文章中，我們將會探索如何使用 CSS 讓一個正方體旋轉并同時放光。要做到這一點，我們需要先創建一個簡單的 HTML 元素來模擬一個正方體，然后再使用 CSS 給它添加具體的樣式。

.box {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
animation: rotate 3s linear infinite;
}
.box:before,
.box:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 20px rgb(255, 255, 255), 0 0 50px rgb(255, 255, 255);
opacity: 0;
filter: blur(10px);
animation: light 3s linear infinite;
}
.box:before {
transform: rotateY(90deg) translateZ(50px);
}
.box:after {
transform: rotateX(90deg) translateZ(50px);
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
@keyframes light {
0% {
opacity: 0;
filter: blur(10px);
}
50% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 0;
filter: blur(10px);
}
}

代碼中，我們首先定義了一個類名為 box 的元素，它模擬了一個正方體的形狀。我們使用了 transform-style: preserve-3d 屬性來告訴瀏覽器該元素應始終在 3D 空間中保持其形狀。為了讓正方體旋轉，我們使用了 animation 屬性并指定一個名為 rotate 的動畫。

接下來，我們使用偽類元素 :before 和 :after 來添加兩個光暈。這些光暈通過 box-shadow 屬性來創建，然后使用 opacity 和 filter 來調整其透明度和模糊度。我們為這些光暈添加了一個名為 light 的動畫，它通過改變透明度和模糊度來模擬閃爍的光芒。

最后，我們使用 @keyframes 來定義兩個動畫的具體效果。rotate 動畫將元素旋轉 360 度，而 light 動畫則控制光暈的透明度和模糊度。

通過這些 CSS 屬性和技巧，我們可以很容易地讓一個普通的 HTML 元素變得更加生動、有趣。這種技巧可以應用于各種網頁設計和動畫效果中，為用戶提供更好的視覺體驗。