CSS3門開關(guān)

CSS3是層疊樣式表的最新標(biāo)準(zhǔn)，支持豐富的樣式、動(dòng)畫效果等功能。其中，門開關(guān)效果是一種特別受歡迎的效果，在不同的網(wǎng)頁中都能夠使用到。下面，我們就來介紹一下如何使用CSS3制作門開關(guān)效果。

.switch {
display: inline-block;
width: 50px;
height: 25px;
background-color: #ddd;
border-radius: 15px;
border: 1px solid #ddd;
position: relative;
cursor: pointer;
}
.switch:before {
content: "";
background-color: #fff;
width: 22px;
height: 22px;
border-radius: 50%;
position: absolute;
top: 1px;
left: 1px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
transition: all 0.25s ease-in-out;
}
.switch:checked:before {
left: 27px;
}

首先，我們需要一個(gè)div容器，然后給容器設(shè)置一些基本的樣式，如寬度、高度、背景色等等。我們還需要給這個(gè)容器添加偽元素before，利用before可以讓我們在這個(gè)容器的內(nèi)部添加一個(gè)圓形按鈕。

在before中，我們需要設(shè)置背景色、寬度、高度、圓角、絕對定位等等。我們還要添加一個(gè)陰影效果，讓這個(gè)按鈕看起來更加立體。注意，我們在before的樣式中添加了一個(gè)過渡效果，讓按鈕在點(diǎn)擊之后可以緩慢地移動(dòng)到指定位置。

最后，在before中添加一個(gè):checked選擇器，這個(gè)選擇器在用戶點(diǎn)擊按鈕之后生效。我們在這里修改按鈕的left屬性，讓它向右移動(dòng)，從而實(shí)現(xiàn)門開關(guān)的效果。