用純CSS寫一個左右滑動的開關按鈕

/*關閉狀態*/

.dashDiv{
    float: right;
    border-radius: 1.8667rem;
    border: 0.03rem solid #cbcbcb;
    background-color: #FFFFFF;
    width: 1.26667rem;
    height: 0.613333rem;
    margin-top: 0.5rem;
    margin-right: 0.4rem;
    box-sizing: border-box;
}

.dashDiv .dashSpan{
    border-radius: 50%;
    border: 0.03rem solid #cbcbcb;
    background-color: #FFFFFF;
    float: left;
    margin-left: 0.04rem;
    margin-top: 0.019rem;
    width: 0.506rem;
    height: 0.506rem;
    box-sizing: border-box;
}

/*開通狀態*/

.dashDivSelectd{
    background-color: #4cd964;
    transition: .5s;
    border-radius: 1.8667rem;
    border: 0.03rem solid #FFFFFF;
    width: 1.26667rem;
    height: 0.613333rem;
    margin-top: 0.5rem;
    margin-right: 0.4rem;
    float: right;
    box-sizing: border-box;

}

.dashDivSelectd .dashSpan{
    border-radius: 50%;
    border: 0.03rem solid #FFFFFF;
    background-color: #FFFFFF;
    float: right;
    margin-right: 0.04rem;
    margin-top: 0.019rem;
    width: 0.506rem;
    height: 0.506rem;
    box-sizing: border-box;
}

/*關閉狀態*/

<div class="dashDiv">
   <span class="dashSpan"></span>
</div>

/*開通狀態*/

<div class="dashDivSelectd">
   <span class="dashSpan"></span>
</div>