CSS3复选框动画

本示例实现了两种单选按钮动画效果，一种是移动，一种是滑块，以下是html布局以及css样式

html：这里使用了label标签的for属性，以此来绑定radio

<div class="checkbox-1">
    <input type="checkbox" name="checkbox-1" id="checkbox-1-1" checked="checked">
    <label for="checkbox-1-1"></label>
 
    <input type="checkbox" name="checkbox-1" id="checkbox-1-2">
    <label for="checkbox-1-2"></label>
 
    <input type="checkbox" name="checkbox-1" id="checkbox-1-3">
    <label for="checkbox-1-3"></label>
</div>
<div class="checkbox-2">
    <input type="checkbox" name="checkbox-2" id="checkbox-2-1" checked="checked">
    <label for="checkbox-2-1"></label>
 
    <input type="checkbox" name="checkbox-2" id="checkbox-2-2">
    <label for="checkbox-2-2"></label>
 
    <input type="checkbox" name="checkbox-2" id="checkbox-2-3">
    <label for="checkbox-2-3"></label>
</div>

css

<style type="text/css">
    .checkbox-1{
        width: 980px;
        margin: 0 auto;
        text-align: center;
        padding: 3% 0;
        background-color: #99cccc;
    }
    .checkbox-1 label{
        display: inline-block;
        width: 10px;
        height: 10px;
        padding: 9px;
        border: 1px #cccccc solid;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background-color: #ffffff;
        color: #333;
        margin-right: 10px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
    }
    .checkbox-1 [type="checkbox"]{
        display: none;
    }
    .checkbox-1 label:after{
        content: 'X';
        font-family: Arial;
        color: #ffffff;
        background-color: #399;
        position: absolute;
        top: 1px;
        left: 1px;
        width: 26px;
        height: 26px;
        line-height: 26px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        text-align: center;
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-transition: -webkit-transform .2s ease-in;
        -moz-transition: -moz-transform .2s ease-in;
        -ms-transition: -ms-transform .2s ease-in;
        -o-transition: -o-transform .2s ease-in;
        transition: transform .2s ease-in;
    }
    .checkbox-1 [type="checkbox"]:checked + label:after{
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition: -webkit-transform .2s ease-in;
        -moz-transition: -moz-transform .2s ease-in;
        -ms-transition: -ms-transform .2s ease-in;
        -o-transition: -o-transform .2s ease-in;
        transition: transform .2s ease-in;
    }
 
    .checkbox-2{
        width: 980px;
        margin: 0 auto;
        text-align: center;
        padding: 3% 0;
        background-color: #99cccc;
    }
    .checkbox-2 label{
        display: inline-block;
        width: 68px;
        height: 34px;
        border: 1px #cccccc solid;
        -webkit-border-radius: 18px;
        -moz-border-radius: 18px;
        border-radius: 18px;
        background-color: #ffffff;
        margin-right: 10px;
        position: relative;
        cursor: pointer;
        -webkit-transition: background-color .2s ease-in;
        -moz-transition: background-color .2s ease-in;
        -ms-transition: background-color .2s ease-in;
        -o-transition: background-color .2s ease-in;
        transition: background-color .2s ease-in;
    }
    .checkbox-2 [type="checkbox"]{
        display: none;
    }
    .checkbox-2 label:after{
        content: '';
        position: absolute;
        left: 1px;
        top: 1px;
        width: 30px;
        height: 30px;
        border: 1px #e0e0e0 solid;
        background-color: #ffffff;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: left .2s ease-in;
        -moz-transition: left .2s ease-in;
        -ms-transition: left .2s ease-in;
        -o-transition: left .2s ease-in;
        transition: left .2s ease-in;
    }
    .checkbox-2 [type="checkbox"]:checked + label{
        background-color: #33cc66;
        -webkit-transition: background-color .2s ease-in;
        -moz-transition: background-color .2s ease-in;
        -ms-transition: background-color .2s ease-in;
        -o-transition: background-color .2s ease-in;
        transition: background-color .2s ease-in;
    }
    .checkbox-2 [type="checkbox"]:checked + label:after{
        left: 35px;
        -webkit-transition: left .2s ease-in;
        -moz-transition: left .2s ease-in;
        -ms-transition: left .2s ease-in;
        -o-transition: left .2s ease-in;
        transition: left .2s ease-in;
    }
</style>