前端使用原生html + css 实现switch开关

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .btn-switch {
                cursor: pointer;
                width: 52px;
                height: 31px;
                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 !important;
            }

            .btn-switch.large {
                width: 70px;
                height: 30px;
                border-radius: 30px;
            }

            .btn-switch.large:before {
                content: '';
                width: 28px;
                height: 28px;
                border-radius: 30px;
            }

            .btn-switch.large:after {
                content: '关闭';
                color: #999;
                left: 30px;
                position: absolute;
                line-height: 30px;
                font-size: 14px;
            }

            .btn-switch.large:checked:after {
                content: '开启';
                color: #fff;
                left: 10px;
                position: absolute;
                line-height: 30px;
                font-size: 14px;
            }

            .btn-switch.large:checked:before {
                left: 40px;
            }

            .btn-switch:before {
                content: '';
                width: 29px;
                height: 29px;
                position: absolute;
                top: 0px;
                left: 0;
                border-radius: 20px;
                background-color: #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            }

            .btn-switch:checked {
                border-color: #64bd63;
                box-shadow: #64bd63 0 0 0 16px inset;
                background-color: #64bd63;
            }

            .btn-switch:checked:before {
                left: 21px;
            }

            .btn-switch.btn-switch-animbg {
                transition: background-color ease 0.4s;
            }

            .btn-switch.btn-switch-animbg:before {
                transition: left 0.3s;
            }

            .btn-switch.btn-switch-animbg:checked {
                box-shadow: #dfdfdf 0 0 0 0 inset;
                background-color: #64bd63;
                transition: border-color 0.4s, background-color ease 0.4s;
            }

            .btn-switch.btn-switch-animbg:checked:before {
                transition: left 0.3s;
            }

            .btn-switch.btn-switch-anim {
                transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
            }

            .btn-switch.btn-switch-anim:before {
                transition: left 0.3s;
            }

            .btn-switch.btn-switch-anim:checked {
                box-shadow: #64bd63 0 0 0 16px inset;
                background-color: #64bd63;
                transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
            }

            .btn-switch.btn-switch-anim:checked:before {
                transition: left 0.3s;
            }

            input[type=checkbox]:checked::before {
                font: normal normal normal 14px/2 FontAwesome;
            }
        </style>
    </head>
    <body>
        <label><input class="btn-switch large" type="checkbox" value="" checked=""></label>
    </body>
</html>
前端使用原生html + css 实现switch开关

推荐阅读更多精彩内容
