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("没选中");
            }
        }

效果如下：