css实现开关组件switch
页面
<input type="checkbox" class="switch switch-anim" name="checkbox" checked>
css样式
.switch{ width: 57px; height: 28px; position: relative; border: 1px solid #dfdfdf; background-color: #fdfdfd; box-shadow: #dfdfdf 0 0 0 0 inset; border-radius: 20px; background-clip: content-box; display: inline-block; -webkit-appearance: none; user-select: none; outline: none; } .switch:before { content: ''; width: 26px; height: 26px; position: absolute; top: 0; left: 0; border-radius: 20px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .switch:checked { border-color: blue; box-shadow: blue 0 0 0 16px inset; background-color: blue; } .switch:checked:before { left: 30px; } .switch.switch-anim { transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; } .switch.switch-anim:before { transition: left 0.3s; } .switch.switch-anim:checked { box-shadow: blue 0 0 0 16px inset; background-color: blue; transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; } .switch.switch-anim:checked:before { transition: left 0.3s; }
js 逻辑
function checkNum(){ if($('.switch-anim').prop('checked')){ console.log("选中"); }else{ console.log("没选中"); } }
效果如下: