纯css实现开关按钮效果

最新推荐文章于 2024-03-13 09:14:44 发布

转载最新推荐文章于 2024-03-13 09:14:44 发布 · 157 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ly-qingqiu/p/10496556.html

<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