网上有很多很好看的开关，其实实现的过程大同小异，只是换了一个装扮而已，所以只要掌握开关的核心实现的原理方法，明白了之后也就游刃有余了。
首先我们要实现一个开关的效果的话肯定要分析下如果实现它应该从哪方面开始着手，就如同下面的开关图示一样
没有点击开关的时候，开关的默认状态为左边，点击之后开关跑到了右边，然后背景的颜色也随之改变，所以我们这里就要说到第一种实现的方式，这种方式个人感觉也是比较好理解的吧，只要原理掌握了，无非就是平常我们代码的一个简单地编写。
第一种实现方式：通过CSS3新增的元素状态伪类选择器:checked来实现这个按钮的效果，这里我们可以仔细分析下这个按钮，点击就会触动它小球然后往右边跑，再点击然后回到初始的位置，能够触动这种效果的就是我们的input表单元素中的checkbox（复选框）来实现，通过它自有的属性，点击选中，再点击则变为取消未选中状态。这里把实现的代码附上
<html>
<head>
<meta charset="utf-8">
<title>第一种开关实现</title>
<style type="text/css">
label{
/* 设置label的属性为了呈现小球后面的开关背景 */
display: block;
width: 200px;
height: 100px;
background: #eee;
border-radius: 100px;
margin: 50px;
position: relative;
transition: .6s;
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
