同事早上展示了一款没有使用js完全使用CSS实现的模仿IOS开关的效果,很有意思。在跟其交流了基本的思路后模仿实现了一下。
基本的原理
利用label与checkbox类型的input的关联关系(点击关联的label引发checkbox不同的状态),然后根据checkbox不同的状态就能去做不同状态下的CSS3动态变换。
实现代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.container{
}
div.bg_con{
position:relative;
width: 40px;
height: 24px;
}
div.bg_con input.theHelper{
display:none;
}
div.bg_con label{
position:relative;
display: block;
padding: 1px;
border-radius: 24px;
height: 22px;
background-color: #eee;
cursor: pointer;
vertical-align: top;
-webkit-user-select: none;
-webkit-transition: all 0.3s ease;
}
div.bg_con label:before{
content: '';
display: block;
border-radius: 24px;
height: 22px;
background-color: white;
-webkit-transform: scale(1, 1);
-webkit-transition: all 0.3s ease;
}
div.bg_con label:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 22px;
margin-top: -11px;
margin-left: -11px;
display: block;
border-radius: 100%;
background-color: white;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
-webkit-transform: translateX(-9px);
-webkit-transition: all 0.3s ease;
}
input.theHelper:checked~label:after{
-webkit-transform: translateX(9px);
}
input.theHelper:checked~label:before{
background-color:#4cda64;
}
</style>
</head>
<body>
<div class="container">
<div class="bg_con">
<input id="checked_1" type="checkbox" name="checked_1" class="theHelper" />
<label for="checked_1"></label>
</div>
</div>
</body>
</html>