dvant/lib/dvant-css/switch.css

A Vue.js 2.0 Mobile UI at dawnwin modified from Youzan

.van-switch{height:33px;width:53px;display:inline-block;position:relative;background:#fff;border-radius:16px;box-sizing:border-box;border:1px solid rgba(0,0,0,.1);border-radius:32px}.van-switch__node{width:30px;height:30px;border-radius:13.5px;background-color:#fff;position:absolute;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);left:0;top:0;z-index:2;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.van-switch__node::after{border-color:rgba(0,0,0,.1);border-radius:27px}.van-switch__loading{top:50%;left:50%;width:16px;height:16px;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.van-switch--on{background-color:#44db5e}.van-switch--on::after{border-color:#44db5e}.van-switch--on .van-switch__node{-webkit-transform:translateX(21px);transform:translateX(21px)}.van-switch--off{background-color:#fff;border-color:rgba(0,0,0,.1)}.van-switch--disabled{opacity:.4}