CSS3點(diǎn)擊開關(guān)按鈕是一種非常常見的交互效果，可以用于網(wǎng)站、應(yīng)用程序等各種場(chǎng)景。本文將介紹如何通過(guò)CSS3實(shí)現(xiàn)這一效果。

/* HTML */
<div class="switch">
<input type="checkbox" class="switch-input" id="switch">
<label for="switch" class="switch-label"><span class="switch-text-on">ON</span><span class="switch-text-off">OFF</span></label>
<span class="switch-handle"></span>
</div>
/* CSS */
.switch {
position: relative;
display: inline-block;
line-height: 1;
vertical-align: middle;
width: 60px;
height: 30px;
}
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 0;
height: 0;
}
.switch-label {
display: block;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
width: 100%;
height: 100%;
background-color: #ccc;
border-radius: 30px;
transition: background-color 0.3s;
}
.switch-text-on,
.switch-text-off {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10px;
font-weight: bold;
color: #fff;
opacity: 0.5;
transition: opacity 0.3s;
}
.switch-text-off {
opacity: 1;
}
.switch-input:checked + .switch-label {
background-color: #8bc34a;
}
.switch-input:checked + .switch-label .switch-text-on {
opacity: 1;
}
.switch-input:checked + .switch-label .switch-text-off {
opacity: 0;
}
.switch-handle {
display: block;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: left 0.3s;
}
.switch-input:checked + .switch-label .switch-handle {
left: calc(100% - 20px);
}

在HTML代碼中，我們使用了一個(gè)