使用CSS漸變可以讓一些元素顯得更加生動(dòng)，比如光芒。下面我們來具體了解如何用CSS漸變畫光芒。

.light {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
position: relative;
}
.light:after {
content: "";
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0.5));
position: absolute;
top: 20%;
left: 20%;
}
.light:before {
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,0.8));
position: absolute;
top: 30%;
left: 30%;
}

首先我們需要一個(gè)圓形元素，表示光源。使用border-radius屬性將方形元素變成圓形。

然后我們?yōu)檫@個(gè)元素添加一個(gè):before偽元素，用來表示光芒中心部分的光強(qiáng)。同樣地，我們?yōu)檫@個(gè)元素添加一個(gè):after偽元素，用來表示光芒邊緣部分的光強(qiáng)。

接下來，我們就需要使用radial-gradient漸變來表現(xiàn)光的效果了。通過設(shè)置起始和結(jié)束顏色，我們就能實(shí)現(xiàn)從中心向外擴(kuò)散的光芒效果。

綜上所述，可以通過CSS漸變很容易地實(shí)現(xiàn)生動(dòng)的光芒效果。以上代碼供大家參考，歡迎借鑒學(xué)習(xí)。