Html
    Css
    Js

    
                        
.zhuangtai {
	width:100%;
	background:#fff;
	display:flex;
	justify-content:space-between;
	padding:10px 16px;
	box-sizing:border-box;
	align-items:center;
}
.zhuangtai>b {
	font-size:16px;
}
.zhuangtai .xianshi {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.zhuangtai .xianshi>i {
	font-size:14px;
	color:#cccccc;
	font-style:normal;
	margin-right:10px;
}
.zhuangtai .xianshi>span {
	display:inline-block;
	width:44px;
	height:22px;
	background:#09bb07;
	border-radius:12px;
	padding:1px;
	box-sizing:border-box;
	position:relative;
	transition:0.5s;
}
.zhuangtai .xianshi>span>.btn_u {
	display:inline-block;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#fff;
	position:absolute;
	right:0px;
	transition:0.5s;
	transform:translateX(-2px);
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

jq+css实现,简约,开关,小按钮(原创)

更新时间:2019-11-17 23:43:44

1
      小程序0
      2019/11/21 17:18:17
      这个按钮是在移动端使用的哦 回复