显示图如下(灯光 雨刷):
HTML代码:
<input class="ag-switch ag-switch-animbg" type="checkbox"/>
CSS代码:
.ag-switch {
width: 100%;
height: 23px;
position: relative;
box-shadow: 0px 1px 1px #999 inset;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
cursor: pointer
}
.ag-switch:focus {
outline: 0 !important
}
.ag-switch::-moz-focus-inner {
border-color: transparent !important
}
.ag-switch:before {
content: '';
width: 21px;
height: 21px;
position: absolute;
top: 0;
left: 0;
border-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.4)
}
.ag-switch:checked {
box-shadow: 0px 1px 1px #999 inset;
background-color: #99daf6
}
.ag-switch:checked:before {
left: calc(100% - 21px)
}
.ag-switch.ag-switch-animbg {
transition: background-color ease .4s
}
.ag-switch.ag-switch-animbg:before {
transition: left .3s
}
.ag-switch.ag-switch-animbg:checked {
box-shadow: 0px 1px 1px #999 inset;
background-color: #99daf6;
transition: border-color .4s,background-color ease .4s
}
.ag-switch.ag-switch-animbg:checked:before {
transition: left .3s
}
以上switch在火狐会出现兼容问题,显示为原有checkbox样式,如果需要在火狐浏览器下显示请替换为以下代码:
HTML代码:
<label class="ag-switch">
<input type="checkbox" id="haeundaeWipers"/>
<i></i>
</label>
CSS代码:
.ag-switch {
position: relative;
display: inline-block;
width: 90px;
height: 23px;
border-radius: 15px;
background-color: #f7f7f7;
border: 1px solid #dcdcdc;
box-shadow: 0px 1px 1px #999 inset;
overflow: hidden;
vertical-align: middle;
cursor: pointer
}
.ag-switch input {
visibility: hidden
}
.ag-switch i {
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: calc(25% - 1px);
height: 100%;
border-radius: 100%
}
.ag-switch i::before {
content: " ";
display: none;
width: 600%;
height: 100%;
border-radius: 10%;
background-color: #99daf6;
box-shadow: 0px 1px 1px #999 inset
}
.ag-switch i::after {
content: " ";
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: inline-block;
width: 100%;
height: 100%;
border-radius: 100%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,.4)
}
.ag-switch input:checked+i {
transform: translateX(100%);
-webkit-transform: translateX(315%)
}
.ag-switch input:checked+i:before {
display: inline-block;
transform: translateX(-60%)
}