用純CSS寫一個左右滑動的開關按鈕
阿新 • • 發佈:2019-02-08
/*關閉狀態*/
.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>