在網頁開發中，CSS（Cascading Style Sheets）可謂是一個至關重要的元素。在CSS中，我們可以使用“豎開關”來實現一個很酷的效果。豎開關也稱為滑動開關，用來表示開關狀態

.switch {
position: relative;
width: 50px;
height: 24px;
background-color: #ddd;
border-radius: 20px;
cursor: pointer;
}
.switch:before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
transition: all 0.3s ease;
}
.switch.on {
background-color: #5dc5fa;
}
.switch.on:before {
transform: translateX(25px);
}
.switch:not(.on):before {
transform: translateX(0px);
}

代碼解析：

這里我們先用一個div元素來實現我們的豎開關。

然后我們在CSS中設置了相應的屬性，包括了開關的整體樣式和按鈕的樣式，并設置了鼠標懸停時的樣式。

.switch {
position: relative;
width: 50px;
height: 24px;
background-color: #ddd;
border-radius: 20px;
cursor: pointer;
}
.switch:before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
transition: all 0.3s ease;
}
.switch.on {
background-color: #5dc5fa;
}

按鈕動態效果實現：

使用了CSS3的動畫過渡效果來完成。為此，我們在“豎開關”的DIV元素上加上了一個類“.on”表示開，沒開的時候，按鈕是在最左邊的位置，所以左移0px；開的時候，按鈕在最右邊的位置，所以左移了25px。

.switch.on:before {
transform: translateX(25px);
}
.switch:not(.on):before {
transform: translateX(0px);
}

最后，我們用JavaScript為豎開關添加事件來實現實際的功能。

const switchBtn = document.querySelector('.switch');
switchBtn.addEventListener('click', () =>{
switchBtn.classList.toggle('on');
});

大功告成！現在我們已經成功創建了一個美觀、實用的CSS豎開關。