CSS是一種網(wǎng)頁(yè)樣式定義語(yǔ)言，可以用來(lái)美化網(wǎng)頁(yè)的外觀。其中一個(gè)常用的效果是光的效果圖，可以使頁(yè)面看起來(lái)更加生動(dòng)。

下面是一個(gè)使用CSS實(shí)現(xiàn)光的效果圖的簡(jiǎn)單示例。

/*定義光效果圖樣式*/
.light {
position: relative;
text-align: center;
font-size: 20px;
color: #fff;
background: #232323;
overflow: hidden;
}
.light:before {
content: "";
position: absolute;
top: -120px;
left: -120px;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
box-shadow: 0 0 60px 60px rgba(255, 255, 255, 0.1);
animation: rotate 10s linear infinite;
}
/*光的旋轉(zhuǎn)動(dòng)畫(huà)*/
@keyframes rotate {
from {transform: rotateZ(0deg);}
to {transform: rotateZ(360deg);}
}

上述代碼中，我們首先定義了一個(gè).light類(lèi)，用于包裹具有光效果的內(nèi)容。然后使用:before偽元素來(lái)實(shí)現(xiàn)光的效果。設(shè)置了寬度、高度、背景色、邊框半徑、陰影等樣式，最后使用動(dòng)畫(huà)使其不停旋轉(zhuǎn)。這樣就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的光效果圖了。