纯生CSS----购物车 Check 、iOS Switch效果

好久没写东西了，最近很乱，从一个状态切换到另一个状态，自己还没习惯。

大鱼海棠
随机到了首歌，貌似是国产动画"大鱼海棠"的主题曲《大鱼》，和"妖狐小红娘"的ED《东流》一样，都是不错的歌；听着听着就想写一篇文章。

---

先说一下购物车那种勾选效果，做为一只菜鸟前端工程师，上周听leader和别人提到，手机上的那种勾选效果，不用JS可以做到的，自己找了一下资料，原来是input和label再加上CSS就够了；

手机效果 就是上面这种，后来项目中我用iconfont + label + input 搞定了，这里样式很简单，但是原理是一样的，来看看代码；

<ul class='item-list'>
  <li class='item'>
    <div class='select'>
      <input type='checkbox' id='foo1'/ class='ipt'>
      <label for='foo1' class='lab'></label>
    </div>
    <div class='des'>
      <h4>标题</h4>
      <p>内容介绍</p>
    </div>
  </li>
  <li class='item'>
    <div class='select'>
      <input type='checkbox' id='foo2'/ class='ipt'>
      <label for='foo2' class='lab'></label>
    </div>
    <div class='des'>
      <h4>标题</h4>
      <p>内容介绍</p>
    </div>
  </li>
</ul>

复选框
CSS中就是隐藏input，利用label做样式；本质仍旧是利用input type='checkbox'然后这个input：active之后，label怎么变样式的问题;在线效果JSBIN；
这个是多选，单选代码比这个简单，直接上预览，要不然后面的主角就不能出场了JSBIN

---

好了，主角登场了，纯CSS模拟iOS中Switch按钮效果：

• 首先是我思考这个问题的思路，既然抛弃JS也能做到，说明他们的着力点都是一样的，Switch无非是两种状态的切换，中间增加过渡时间，也就有一个切换的效果，那么必然有两种状态和分别两套样式；
• 打开你的iPhone，这个小滑块在前端这里就是位置的移动，position定位就来了，那么在横向上移动就可以解决问题了；
• 看看预览图，在线的地址依旧等着你JSBIN
  模拟iOS的Switch效果

---

大鱼这首歌，吼吼听啊！！