* { margin:0; padding:0; } input { display:none; } label { margin:50px; display:block; width:200px; height:60px; border-radius:30px; background:rgb(128,128,128); border:1px solid #eee; cursor:pointer; position:relative; overflow:hidden; } label::before { display:block; content:''; width:60px; height:60px; border-radius:50%; background:white; position:absolute; left:0px; top:50%; transform:translateY(-50%); transition:all .3s; } label::after { display:block; content:''; width:0; height:100%; background:#006BB0; transition:all .3s; border-radius:10px; } input:checked + label::before { left:140px; } input:checked + label::after { width:100%; }
更新时间:2022-05-16 01:42:44
在制作后台页面的时候,input多选框是不可以直接修改样式的,普通的多选框或者按钮太单调了,使用开关还需要引入库,所以使用css制作了此效果。