纯CSS checkbox开关切换按-html代码-BFW代码库

纯CSS checkbox开关切换按

代码语言：html

代码描述：纯css实现checkbox的多种切换效果，还有动画效果，无需js实现

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯CSS checkbox开关切换按钮</title>
    <style type="text/css" media="all">
        * {
            user-select: none;
            -webkit-tap-highlight-color: transparent
        }

        *:focus {
            outline: none
        }

        body {
            font-family: Arial,Helvetica,sans-serif;
            margin: 0;
            background-color: #f1f9f9
        }

        #app-cover {
            display: table;
            width: 600px;
            margin: 80px auto;
            counter-reset: button-counter
        }

        .row {
            display: table-row
        }

        .toggle-button-cover {
            display: table-cell;
            position: relative;
            width: 200px;
            height: 140px;
            box-sizing: border-box
        }

        .button-cover {
            height: 100px;
            margin: 20px;
            background-color: #fff;
            box-shadow: 0 10px 20px -8px #c5d6d6;
            border-radius: 4px
        }

        .button-cover:before {
            counter-increment: button-counter;
            content: counter(button-counter);
            position: absolute;
            right: 0;
            bottom: 0;
            color: #d7e3e3;
            font-size: 12px;
            line-height: 1;
            padding: 5px
        }

        .button-cover,.knobs,.layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0
        }

        .button {
            position: relative;
            top: 50%;
            width: 74px;
            height: 36px;
            margin: -20px auto 0;
            overflow: hidden
        }

        .button.r,.button.r .layer {
            border-radius: 100px
        }

        .button.b2 {
            border-radius: 2px
        }

        .checkbox {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
            z-index: 3
        }

        .knobs {
            z-index: 2
        }

        .layer {
            width: 100%;
            background-color: #ebf7fc;
            transition: .3s ease all;
            z-index: 1
        }

        #button-1 .knobs:before {
            content: 'YES';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 10px;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            background-color: #03a9f4;
            border-radius: 50%;
            transition: .3s cubic-bezier(.18,.89,.35,1.15) all
        }

        #button-1 .checkbox:checked+.knobs:before {
            content: 'NO';
            left: 42px;
            background-color: #f44336
        }

        #button-1 .checkbox:checked~.layer {
            background-color: #fcebeb
        }

        #button-1 .knobs,#button-1 .knobs:before,#button-1 .layer {
            transition: .3s ease all
        }

        #button-2 .knobs:before,#button-2 .knobs:after {
            content: 'YES';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 10px;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            background-color: #03a9f4;
            border-radius: 50%;
            transition: .3s ease all
        }

        #button-2 .knobs:before {
            content: 'YES'
        }

        #button-2 .knobs:after {
            content: 'NO'
        }

        #button-2 .knobs:after {
            right: -28px;
            left: auto;
            background-color: #f44336
        }

        #button-2 .checkbox:checked+.knobs:before {
            left: -28px
        }

        #button-2 .checkbox:checked+.knobs:after {
            right: 4px
        }

        #button-2 .checkbox:checked~.layer {
            background-color: #fcebeb
        }

        #button-3 .knobs:before {
            content: 'YES';
            position: absolute;
            top: 4px;
            left: 4px;
            width: 20px;
            height: 10px;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            text-align: center;
            line-height: 1;
            padding: 9px 4px;
            background-color: #03a9f4;
            border-radius: 50%;
            transition: .3s ease all,left .3s cubic-bezier(.18,.89,.35,1.15)
        }

        #button-3 .checkbox:active+.knobs:before {
            width: 46px;
            border-radius: 100px
        }

        #button-3 .checkbox:checked:active+.knobs:before {
            margin-left: -26px
        }

        #button-3 .checkbox:checked+.knobs:before {
            content: 'NO';
            left: 42px;
            background-color: #f44336
        }

        #button-3 .checkbox:checked~.layer {
            background-color: #fcebeb
        }

        #button-4 .knobs:before,#button-4 .knobs:after {
            position: absol.........完整代码请登录后点击上方下载按钮下载查看