css3 复选框样式

    <style>
        body,input,label{
            margin: 0;
            padding: 0;
        }
        /*第一个复选框样式*/
        .checkbox1{
            width: 980px;
            margin: 0 auto;
            background-color: burlywood;
            text-align: center;
            padding: 3% 0;

        }
        .checkbox1 label{
            display: inline-block;
            width: 10px;
            height: 10px;
            padding: 9px;
            background-color: #fff;
            border: 1px solid #fff;
            border-radius: 4px;
            margin-right: 10px;
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }
        .checkbox1 label:after{
            content: 'X';
            background-color: cadetblue;
            color: #ffffff;
            width: 26px;
            height: 26px;
            position: absolute;
            left: 1px;
            top: 1px;
            line-height: 26px;
            border-radius: 4px;
            text-align: center;
            transform:translateY(-30px);
            transition:transform .2s ease-out;
        }
        .checkbox1 [type="checkbox"]:checked + label:after{
            transform:translateY(0px);
            transition:transform .2s ease-in;
        }
        .checkbox1 input{
            display: none;
        }

        /*第二个复选框样式*/

       .checkbox2{
           width: 980px;
           background-color: coral;
           padding: 3% 0;
           text-align: center;
            margin: 0 auto;
       }
        .checkbox2 label{
            display: inline-block;
            width: 68px;
            height: 34px;
            border: 1px solid #fff;
            margin-right: 10px;
            position: relative;
            background-color: #ffffff;
            border-radius: 18px;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            transition:left .1s ease-in;
            transition:background-color .1s ease-in;


        }
        .checkbox2 label:after{
            content:'';
            width:30px ;
            height: 30px;
            left:1px ;
            top:1px ;
            position: absolute;
            border: 1px solid antiquewhite;
            border-radius: 15px;
            transition:left .1s ease-out;


        }
        .checkbox2 [type="checkbox"]:checked + label{
            background-color: #999;
            transition:background-color .1s ease-in;

        }
        .checkbox2 [type="checkbox"]:checked + label:after{
            left: 35px;
            transition:left .1s ease-in;
        }
        .checkbox2 input{
            display: none;
        }



    </style><pre name="code" class="html"><div class="checkbox1">
    <input type="checkbox" name="checkbox-1" checked="checked"  id="checkbox1-1"/>
    <label for="checkbox1-1"></label>
    <input type="checkbox" name="checkbox-2" id="checkbox1-2"/>
    <label for="checkbox1-2"></label>
    <input type="checkbox" name="checkbox-3" id="checkbox1-3"/>
    <label for="checkbox1-3"></label>
</div>

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