css3有文字的开关按钮

<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <title></title>
        <style>
            .wrap{
                width: 42px;
                height: 20px;
            }
            input{
                display: none;
            }
            label{
                display: block;
                border: 1px solid #888;
                height: 20px;
                border-radius: 15px;
                transition: .3s;
            }
            label .move{
                display: block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                Box-shadow: 1px 1px 1px #ccc;
                background: #fff;
                transition: .3s;
                overflow: hidden;
            }
            input:checked+label{
                background: red;
            }
            input:checked+label .move{
                transform: translateX(20px);
                Box-shadow: none;
            }
            .move span{
                width: 40px;
                display: block;
                height: 20px;
                line-height: 20px;
                transition: 0.3s;
            }
            input:checked+label .move span{
                transform: translateX(-20px);
            }
            em{
                text-align: center;
                width: 50%;
                font-size: 12px;
                font-style: normal;
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <input type="checkBox" id="checkBox" />
            <label for="checkBox">
                <span class="move">
                    <span>
                        <em>on</em>
                        <em>off</em>
                    </span>
                </span>
            </label>
        </div>
    </body>
</html>
css3有文字的开关按钮

相关推荐
