按钮开关demo
源码如下：
<style>
.container{ margin: 0px;padding: 100px 250px;}
.switch-test{
-webkit-appearance: none;
appearance: none;
position: relative;
width: 52px;
height: 32px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
font-weight:bold;">#DFDFDF;
-webkit-transition: background-color 0.1s, border 0.1s;
transition: background-color 0.1s, border 0.1s;
}
.switch-test:before{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
font-weight:bold;">#FDFDFD;
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.switch-test:after{
content: " ";
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border-radius: 15px;
font-weight:bold;">#FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.switch-test:checked{
border-color: #00cc99;
font-weight:bold;">#00cc99;
}
.switch-test:checked:before{
-webkit-transform: scale(0);
transform: scale(0);
}
.switch-test:checked:after{
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
</style>
</head>
<body>
<div class="container">
<input class="switch-test" type="checkbox"/>
</div>
</body>
效果截图如下：
