纯css实现开关按钮效果

<div class="darkBox">
    <input type="checkbox" id="inp" value=“inp” name="inp"/>
    <label for="inp">label>
div>

css：

.darkBox{
            width:80px;
            height:35px;
            position:relative;
            margin:auto;
        }
        .darkBox:before{
            content:"ON";
            width:40px;
            height:35px;
            position:absolute;
            left:0;
            top:0;
            z-index:1;
        }
        .darkBox:after{
            content:"OFF";
            width:40px;
            height:35px;
            position:absolute;
            right:0;
            top:0;
        }
        input[type=checkbox]{
            position:absolute;
            opacity: 0;
        }
        input[type=checkbox]:checked+label:before{
            background:#3ccd58;
        }
        input[type=checkbox]:checked+label:after{
            left:40px;
        }
        label{
            width:40px;
            height:35px;
            position: relative;
        }
        label:before{
            content:"";
            width:80px;
            height:35px;
            position:absolute;
            /*left:0;*/
            background:#fe5453;
        }
        label:after{
            content:"";
            width:40px;
            height:35px;
            position:absolute;
            left:0;
            background:#b1b1b1;
            z-index:2;
            transition:all 0.2s ease;
        }

这里运用了before和after类选择器的知识。

转载于:https://www.cnblogs.com/ly-qingqiu/p/10496556.html