效果圖
原理
switch只有兩個狀態,開/關,跟input的checkbox一致,所以我們可以藉助checkbox完成樣式的切換;
html
一個簡單的input
<input class="switch-component" type="checkbox">
css
/* 背景層 */
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border-radius: 30px;
border: none;
outline: none;
-webkit-appearance: none;
transition: all .2s ease;
}
/* 按鈕 */
.switch-component::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transition: all .2s ease;
}
/* 選中狀態時,背景色切換 */
.switch-component:checked {
background-color: #86c0fa;
}
/* 選中狀態時,按鈕的位置移動 */
.switch-component:checked::after {
left: 50%;
}
往期系列
這個系列會放許多你不知道的css騷操作,敬請期待!😆
🙌💥歡迎所有前端愛好者關注我的個人微信公衆號,我會不定期分享最新、實用性高的前端文章以及技巧!