编写本地开关按钮
最编程
2024-05-05 16:13:09
...
#checked {
width: 60px;
position: relative;
margin: 20px auto;
}
.labelBox {
margin-bottom: 20px;
background: #409eff;
border-radius: 40px;
width: 60px;
position: relative;
height: 32px;
}
.check {
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background: #fff ;
border: 1px solid #e5e5e5;
position: absolute;
top: 0px;
left: 0px;
}
input[type=checkbox] {
border: 0 none ;
clip: rect(1px,1px,1px,1px);
height: 1px ;
overflow: hidden ;
position: absolute ;
width: 1px ;
}
@keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 28px;
}
}
@keyframes labelOFF {
0% {
top: 0px;
left: 28px;
}
100% {
top: 0px;
left: 0px;
}
}
input[type=checkbox]:checked + label.check {
top: 0px;
left: 28px;
-webkit-animation: labelON 0.2s ease-in 0s 1;
-moz-animation: labelON 0.2s ease-in 0s 1;
-o-animation: labelON 0.2s ease-in 0s 1;
-ms-animation: labelON 0.2s ease-in 0s 1;
animation: labelON 0.2s ease-in 0s 1;
box-shadow: #244766 -1px 0px 3px;
}
input[type=checkbox] + label.check {
top: 0px;
left: 0px;
-webkit-animation: labelOFF 0.2s ease-in 0s 1;
-moz-animation: labelOFF 0.2s ease-in 0s 1;
-o-animation: labelOFF 0.2s ease-in 0s 1;
-ms-animation: labelOFF 0.2s ease-in 0s 1;
animation: labelOFF 0.2s ease-in 0s 1;
box-shadow: #244766 1px 0px 3px;
}
.status{
text-align:center;
}