checkbox

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.checkbox-1{
width: 980px;
margin:0 auto;
text-align: center;
padding:3% 0;
background-color: #9cc;
}
.checkbox-1 [type="checkbox"]{
display: none;
}
.checkbox-1 label{
display: inline-block;
width: 10px;
height: 10px;
padding:9px;
border: 1px #ccc solid;
border-radius: 4px;
background-color: #fff;
color: #333;
margin-right: 10px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.checkbox-1 label:after{
content: 'X';
font-family: Arial;
color: #fff;
background-color: #399;
width: 26px;
height: 26px;
line-height: 26px;
position: absolute;
left: 1px;
top:1px;
border-radius: 4px;
text-align: center;
transform:translateY(-30px);
transition:transform .2s ease-out;
}
.checkbox-1 [type="checkbox"]:checked + label:after{
transform:translateY(0);
transition:transform .2s ease-in;
}

/* ================= */
.checkbox-2{
width: 980px;
margin:0 auto;
padding:3% 0;
background-color: #fc9;
text-align: center;
}
.checkbox-2 [type="checkbox"]{
display: none;
}
.checkbox-2 label{
display: inline-block;
width: 68px;
height: 34px;
border: 1px #eee solid;
background-color: #fafafa;
border-radius: 18px;
margin-right: 10px;
cursor: pointer;
position: relative;
transition:background-color .1s ease-in;
}
.checkbox-2 label:after{
content: '';
position: absolute;
left: 1px;
top:1px;
width: 30px;
height: 30px;
border:1px #eee solid;
border-radius: 50%;
background-color: #fff;
transition:left .1s ease-out;
}

.checkbox-2 [type="checkbox"]:checked + label{
background-color: #3c6;
transition:background-color .1s ease-in;
}
.checkbox-2 [type="checkbox"]:checked + label:after{
left:35px;
transition:left .1s ease-in;
}
</style>
<body>
<div class="checkbox-1">
<input type="checkbox" name="checkbox-1" checked="checked" id="checkbox-1-1" />
<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" checked="checked" id="checkbox-2-1" />
<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>
</body>
</html>

posted @ 2016-06-30 15:34  YAMI萌糖  阅读(84)  评论(0)    收藏  举报