CSS寫Toggle效果

CSS可以用來添加Toggle（開關(guān)）效果，這種效果可以讓用戶在兩種不同的選項(xiàng)之間進(jìn)行切換。在本文中，我們將會(huì)介紹如何使用CSS實(shí)現(xiàn)這種效果。

.toggle {
width: 50px;
height: 30px;
background-color: #ccc;
border-radius: 30px;
position: relative;
margin: 0 auto;
cursor: pointer;
}
.toggle:before {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background-color: white;
border-radius: 50%;
transition: all .2s ease;
}
input:checked + .toggle:before {
left: 22px;
}

首先，我們創(chuàng)建了一個(gè)class為toggle的元素，用來展示Toggle的樣式。我們?cè)O(shè)置了它的寬度、高度、背景顏色、邊框半徑、位置和鼠標(biāo)樣式。然后，我們使用:before偽元素來創(chuàng)建Toggle的圓形按鈕，并設(shè)置它的樣式、位置和過渡效果。

接下來，我們使用CSS選擇器來檢查Toggle是否被選中。如果選中了，我們使用+運(yùn)算符來選擇Toggle前面的input元素，并使用:checked偽類選擇已選中的輸入。我們使用這些選擇器來使Toggle的圓形按鈕移動(dòng)到正確的位置。因?yàn)槲覀冊(cè)O(shè)置了過渡效果，所以按鈕在移動(dòng)時(shí)會(huì)有一個(gè)平滑的動(dòng)畫效果。

這就是如何使用CSS實(shí)現(xiàn)Toggle效果。在你的網(wǎng)站上添加這種效果，可以使用戶更方便地切換不同的選項(xiàng)。