css3门开关 |css3文档中文

CSS3是层叠样式表的最新标准，支持丰富的样式、动画效果等功能。其中，门开关效果是一种特别受欢迎的效果，在不同的网页中都能够使用到。下面，大家就来介绍一下如何使用CSS3制作门开关效果。

.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;
}

首先，大家需要一个div容器，然后给容器设置一些基本的样式，如宽度、高度、背景色等等。大家还需要给这个容器添加伪元素before，利用before可以让大家在这个容器的内部添加一个圆形按钮。

在before中，大家需要设置背景色、宽度、高度、圆角、绝对定位等等。大家还要添加一个阴影效果，让这个按钮看起来更加立体。注意，大家在before的样式中添加了一个过渡效果，让按钮在点击之后可以缓慢地移动到指定位置。

最后，在before中添加一个:checked选择器，这个选择器在用户点击按钮之后生效。大家在这里修改按钮的left属性，让它向右移动，从而实现门开关的效果。