1. 程式人生 > >用純CSS寫一個左右滑動的開關按鈕

用純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>