效果如图:
点击可以进行切换
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="toggle">
<input type="checkbox" checked id="t">
<label for="t"></label>
</div>
<style type="text/css">
.toggle{
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
position: relative;
border-radius: 50px;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5),0px 1px 0px rgba(255,255,255,0.2);
}
.toggle:after{
content: 'OFF';
color: #fff;
position: absolute;
right: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255.255..15);
}
.toggle:before{
content: 'ON';
color: #f66;
position: absolute;
left: 10px;
z-index: 0;
font: 12px/26px Arial, sans-serif;
font-weight: bold;
}
.toggle label{
display: block;
width: 34px;
height: 20px;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
background: #fcfff4;
background: linear-gradient(top,#fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 50px;
transition: all 0.4s ease;
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
}
.toggle input[type=checkbox]{
visibility: hidden;
}
.toggle input:checked + label{
left: 43px;
}
</style>
</body>
</html>