效果图:
<div class="switch">
<div class="btn"></div>
</div>
css
* {
margin:0;
padding:0;
}
body{padding:30px;}
.switch {
padding:2px;
width:60px;
height:20px;
background-color:#ccc;
cursor:pointer;
transition:0.4s;
border-radius:40px;
}
.btn {
width:20px;
height:20px;
background-color:white;
transition:0.4s;
margin-left:0px;
border-radius:100%;
}
.right {
float:right;
}
.bgchage {
background-color:#03a9f4;
}
jquery
$(".switch").on("click", function() {
$(".switch").toggleClass("bgchage");
$(".btn").toggleClass("right");
});