html结构
XML/HTML Code复制内容到剪贴板
- <div class="container">
- <div class="bg_con">
- <input id="checked_1" type="checkbox" class="switch" />
- <label for="checked_1"></label>
- </div>
- </div>
css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现。
CSS Code复制内容到剪贴板
- .switch{
- display:none;
- }
- label{
- position:relative;
- display: block;
- padding: 1px;
- border-radius: 24px;
- height: 22px;
- margin-bottom: 15px;
- background-color: #eee;
- cursor: pointer;
- vertical-align: top;
- -webkit-u