HTML開關代碼：如何實現一個簡單的開關按鈕？
<!DOCTYPE html> <html> <head> <title>開關按鈕</title> </head> <body> <label class="switch"> <input type="checkbox"> <span class="slider round"></span> </label> </body> </html>
上述代碼展示了一個基本的HTML開關。它包含了一個“switch”類的標簽，這個標簽包含了一個復選框和一個“slider round”類的span標簽。復選框是用來存儲開關的狀態的，當復選框被勾選時，我們就知道開關的狀態是“開”的。而則用來裝飾我們的開關，給它一個漂亮的樣式。
接下來，我們需要為這個開關添加一些CSS樣式，讓它變得更漂亮。
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}上述CSS代碼為我們的開關添加了一些樣式。它包括了一個切換類（.switch），以及一個舞臺類（.slider）和一個用來裝飾舞臺的偽元素（.slider:before）。我們使用了一些CSS屬性來制作出好看的開關效果，比如transition和transform屬性。此外，我們還使用了一些偽元素來實現滑動開關的效果。
最后，我們的HTML開關代碼完成了。我們可以把它拷貝到我們的網頁上，或者進一步修改它，讓它適合我們的需求。無論如何，我們已經學會了如何使用HTML和CSS創建一個功能強大的開關按鈕。
下一篇html 代碼實例