Css代码如下
.al-toggle-button{
appearance: none;
-webkit-appearance: none;
position: relative;
52px;
height: 32px;
background: #dfdfdf;
border-radius: 16px;
border: 1px solid #dfdfdf;
outline: 0;
box-sizing: border-box;
}
.al-toggle-button:checked{
border-color: #04be02;
background-color: #04be02;
}
.al-toggle-button:before, .al-toggle-button:after{
content: " ";
position: absolute;
top: 0;
left: 0;
height: 30px;
border-radius: 15px;
transition: transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
}
.al-toggle-button:before{
50px;
background-color: #fdfdfd;
}
.al-toggle-button:after{
30px;
background-color: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.al-toggle-button:checked:before{
transform: scale(0);
-webkit-transform: scale(0);
}
.al-toggle-button:checked:after{
transform: translateX(20px);
-webkit-transform: translateX(20px);
}HTML中引用
<input type="checkbox" class="al-toggle-button">效果图~~
