先对一个input框进行圆角处理，input框的type属性选择checbox，用display:none将样式彻底隐藏。然后用一个无意义label标签对他进行宽高的处理，得先把label转化一下用display:inline-block;。设置好用css3的transition利用他的过度效果得到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑块</title>
<style>
.box{
width:100px;
height:30px;
background:black;
opacity:0.6;
border-radius:40px;
}
label{
display:inline-block;
width:20px;
height:20px;
background:#ccc;
border-radius:50%;
position:relative;
left:0px;
top:5px;
transition:all 0.5s ease;
}
/*当你点击的时候小滑块向左移*/
input:checked + label{
left:80px;
background:#267832;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" style="display:none" id="on" />
<label for="on"></label>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑块</title>
<style>
.box{
width:100px;
height:30px;
background:black;
opacity:0.6;
border-radius:40px;
}
label{
display:inline-block;
width:20px;
height:20px;
background:#ccc;
border-radius:50%;
position:relative;
left:0px;
top:5px;
transition:all 0.5s ease;
}
/*当你点击的时候小滑块向左移*/
input:checked + label{
left:80px;
background:#267832;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" style="display:none" id="on" />
<label for="on"></label>
</div>
</body>
</html>
4661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
