CSS發光圓環是一種非常炫酷的效果,可以用來增強網站的視覺體驗。下面我們將介紹如何實現這一效果。
.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
}
.circle::after {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border-radius: 50%;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #3f3f3f, 0 0 70px #3f3f3f, 0 0 80px #3f3f3f, 0 0 100px #3f3f3f, 0 0 150px #3f3f3f;
z-index: -1;
}
首先,我們創建一個圓形的 div 元素。
然后,使用 CSS 的 ::after 偽元素為圓形元素添加發光效果,設置偽元素的寬高比圓形元素多 20px,用 box-shadow 屬性來創建發光效果,多次添加不同大小的陰影即可。
通過以上的 CSS 代碼,我們就能實現炫酷的發光圓環效果,可以根據自己的需求來調整圓環大小和發光程度。