纯CSS状态选择动画样式

一款纯CSS状态选择动画样式效果，每种切换都是一个简单的小动画，美化了原有的checkbox和radio，可以用在很多表单里面，喜欢的童鞋请收下吧。

分类：表单代码 > 复选框难易：入门级

查看演示下载资源下载积分： 20 积分

页面的head部分，需要引入2个CSS样式文件，用来设置页面元素的样式，代码如下：

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，一个form表单里放了3个div作为容器，复选框、单选按钮和开关分别放在不同的div里面即可，代码如下：

<form> 
  <h1>纯CSS状态选择动画样式</h1>
  <div class="controls">
    <h1>复选框</h1>
    <input id='check-1' type="checkbox" name='check-1' checked='checked' />
    <label for="check-1">IOS</label>
    <input id='check-2' type="checkbox" name='check-1' />
    <label for="check-2">Android</label>
  </div>
  <div class="controls">
    <h1>单选按钮</h1>
    <input id='radio-1' type="radio" name='r-group-1' checked='checked' />
    <label for="radio-1">Mac OS</label>
    <input id='radio-2' type="radio" name='r-group-1' />
    <label for="radio-2">Windows</label>
  </div>
  <div class="controls">
    <h1>开关</h1>
    <input class='toggle' type="checkbox" name='check-3' checked='checked' />
    <input class='toggle' type="checkbox" name='check-4' />
  </div>
</form>