CSS 指示燈效果可以為網(wǎng)頁中的元素添加視覺上的提示作用。下面我們來介紹一下如何使用 CSS 來實(shí)現(xiàn)常見的指示燈效果。

/* 實(shí)現(xiàn)圓形指示燈 */
.light {
width: 20px;
height: 20px;
background-color: red;
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 10px rgba(255,0,0,0.8);
}
/* 實(shí)現(xiàn)方形指示燈 */
.light {
width: 20px;
height: 20px;
background-color: yellow;
display: inline-block;
box-shadow: 0 0 10px rgba(255,255,0,0.8);
}
/* 實(shí)現(xiàn)三角形指示燈 */
.light {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid green;
display: inline-block;
box-shadow: 0 0 10px rgba(0,255,0,0.8);
}

上述代碼分別實(shí)現(xiàn)了圓形、方形和三角形的指示燈效果。可以根據(jù)實(shí)際需要進(jìn)行修改和調(diào)整，例如更改顏色、大小、陰影等。

此外，指示燈效果可以結(jié)合 JavaScript 等技術(shù)實(shí)現(xiàn)動態(tài)效果，例如通過添加和刪除類來控制指示燈的亮滅狀態(tài)。

總之，CSS 指示燈效果是一個簡單而實(shí)用的前端技術(shù)，可以為網(wǎng)頁添加更加豐富的交互效果。