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>