CSS指示燈仿真是一種常用的Web開發技術,可以在網頁上實現各種顏色的指示燈,用于顯示不同的狀態。本文將介紹如何使用CSS實現指示燈仿真。
/* CSS代碼 */ .lamp { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 8px #666; } .lamp-red { background-color: red; } .lamp-yellow { background-color: yellow; } .lamp-green { background-color: green; }
以上是實現指示燈的CSS代碼,在其中,我們定義了一個lamp類,作為指示燈的基礎樣式。lamp類設置了燈泡的寬、高、圓角和陰影等屬性。同時,我們定義了三個不同顏色的類,分別為lamp-red、lamp-yellow和lamp-green,用于設置不同顏色的燈泡。
通過在HTML中添加不同的顏色類,可以輕松實現不同顏色的指示燈。以上是實現指示燈仿真的所有代碼。
總的來說,CSS指示燈仿真是一種簡單實用的Web開發技術。我們可以根據需要,通過CSS代碼調整指示燈的大小、顏色、亮度等屬性,實現不同效果的指示燈。