本文介紹一種流行的CSS代碼開關(guān)燈特效，在網(wǎng)站設(shè)計(jì)中非常常見。這種特效通過點(diǎn)擊按鈕，來改變頁面的背景顏色、字體顏色等，制造出點(diǎn)燈和關(guān)燈的效果。下面是具體實(shí)現(xiàn)代碼：
```
這是一個段落，背景顏色是淺灰色，字體顏色是黑色。
``` 首先，在樣式表中，我們設(shè)置了繼承于 body 元素的背景顏色和繼承于 p 元素的字體顏色（這里以淺灰色和黑色為例）。然后，我們使用一個與樣式表不同的選擇器，即“l(fā)ight-on”類。這個類定義了另一組背景顏色和字體顏色，即黑色和淺灰色。 在 HTML 部分，我們創(chuàng)建了一個段落和一個按鈕。按鈕的 onclick 屬性綁定了一個 JavaScript 函數(shù)，該函數(shù)用于切換 body 元素的 “l(fā)ight-on”類（也就是切換燈光）。 運(yùn)行代碼后，單擊按鈕可以切換頁面背景的顏色和字體的顏色，從而實(shí)現(xiàn)點(diǎn)燈關(guān)燈的效果。 總之，這種簡單的代碼開關(guān)燈特效是通過 JavaScript 的 classList 屬性，以及 CSS的類選擇器和顏色屬性實(shí)現(xiàn)的。考慮到其易用性和瞬間改變的效果，這種特效在網(wǎng)站設(shè)計(jì)中仍然很受歡迎。