css实现滑动开关

用纯css样式来实现滑动开关的效果，如图：

下面是代码内容：

1.html

<div>   
        <label class="setting-switch">
             <input type="checkbox" checked="">
        </label>
</div>

2.css

.setting-switch {
    position: absolute;
    font-size: .16rem;
    right:0.07rem;
    top: 50%;
    margin-top: -0.16rem;
    width: .7rem;
    height: .3rem;
    line-height: .3rem;
}
.setting-switch input {
    width: .7rem;
    height: -1rem;
    position: absolute;
    top: 4rem;
    left: -2rem;  
    z-index: 2;
    border: 0;
    background: #FF6C2C 0;
    -webkit-appearance: none;
    outline: 0
}
.setting-switch input:before {
    content: '';
    width: 2.7rem;
    height: 1.5rem;
    background-color: #DDDDDD;
    cursor: pointer;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border-color: #dfdfdf;
    -webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
    box-shadow: #dfdfdf 0 0 0 0 inset;
    -webkit-transition: border .4s,-webkit-box-shadow .4s;
    transition: border .4s,box-shadow .4s;
    -webkit-background-clip: content-box;
    background-clip: content-box
}

.setting-switch input:checked:before {
    border-color: #FF6C2C;
    -webkit-box-shadow: #FF6C2C 0 0 0 0.16rem inset;
    box-shadow: #FF6C2C 0 0 0 0.16rem inset;
    background-color: #FF6C2C;
    transition: border .4s,box-shadow .4s,background-color 1.2s;
    -webkit-transition: border .4s,-webkit-box-shadow .4s,background-color 1.2s;
    background-color: #FF6C2C
}
.setting-switch input:checked:after {
    left: 1.35rem;
}
.setting-switch input:after {
    content: '';
    width:1.2rem;
    height: 1.2rem;
    position: absolute;
    top: 51%;
    left: .2rem;
    -webkit-transform:translateY(-50%);
    border-radius: 10%;
    border:none;
    background-color: #fff;
    -webkit-box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);
    box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);
    -webkit-transition: left .2s;
    transition: left .2s
}

 

转载于:https://www.cnblogs.com/Mia-mi/p/7927899.html