CSS LED效果介紹

.led {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 20px;
box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.2),
0 3px 10px rgba(0, 0, 0, 0.2);
}
.led:hover {
box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.2),
0 10px 30px rgba(0, 0, 0, 0.2);
}
.led-red {
background-color: red;
}
.led-orange {
background-color: orange;
}
.led-green {
background-color: green;
}
.led-blue {
background-color: blue;
}
.led-purple {
background-color: purple;
}

CSS LED效果是一種非常逼真、時尚的UI效果，適用于各類Web頁面、APP等UI設計中。該效果基于CSS3，主要利用盒模型和過渡實現。樣式表（CSS）允許形成一個可以自由定義和配置的LED燈樣式，包括燈的大小、形狀、陰影和顏色等。

在代碼中，我們定義了一系列燈的基本樣式，如大小、圓角事項、陰影、背景顏色等。使用:hover偽類，實現LED燈隨鼠標懸停在上方時的閃爍效果。在實際應用中，您可以根據實際需求隨時定義不同LED燈的顏色、大小等配置，既能美觀又能實現個性化定制。