CSS是網(wǎng)頁設(shè)計(jì)領(lǐng)域非常重要的一種技術(shù)，可以實(shí)現(xiàn)豐富多彩的效果。其中發(fā)光效果是很受歡迎的一種效果，在本文中我們將介紹如何通過CSS實(shí)現(xiàn)一個(gè)發(fā)光效果圖。

代碼如下：
.box {
position: relative;
width: 200px;
height: 200px;
background: #333;
}
.box::before, .box::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
filter: blur(20px);
opacity: 0;
transition: all 0.5s;
}
.box::before {
background: rgba(255, 255, 255, 0.7);
}
.box::after {
background: rgba(255, 150, 0, 0.7);
}
.box:hover::before, .box:hover::after {
opacity: 1;
}

首先我們定義一個(gè)容器.box，用于包含整個(gè)效果。然后我們使用偽元素:before和:after在容器內(nèi)創(chuàng)建兩個(gè)圓形元素，作為發(fā)光效果的底層和頂層。因?yàn)榈讓雍晚攲佣际菆A形，所以我們需要設(shè)置border-radius屬性讓它們變成圓形。使用filter屬性可以添加高斯模糊，讓效果更加柔和。我們同時(shí)設(shè)置opacity屬性為0，將它們在初始狀態(tài)下設(shè)為透明。

在:hover時(shí)我們將兩個(gè)元素的opacity屬性設(shè)為1，讓它們在鼠標(biāo)懸浮時(shí)顯示出來。由于使用了過渡動(dòng)畫，整個(gè)效果將變得非常流暢。

這就是CSS實(shí)現(xiàn)發(fā)光效果圖的代碼，通過這個(gè)樣例大家可以學(xué)到如何使用偽元素，高斯模糊和過渡動(dòng)畫等CSS技術(shù)。如果你喜歡這篇文章，請分享給更多的人吧！