css3实现切换按钮效果

一、需求分析

在移动端，经常会需要一个切换按钮，如图：

切换前

切换后

那我可以用css属性来实现这个按钮的切换功能

二、代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #toggle{
                display: none;
            }
            #toggle+label{
                display: block;
                position: relative;
                width: 120px;
                height: 60px;
                padding: 2px;
                cursor: pointer;
                /* background-color: #ddd; */
                border-radius: 60px;

            }
            #toggle+label::before,#toggle+label::after{
                display: block;
                position: absolute;
                left: 1px;
                top: 1px;
                bottom: 1px;
            }
            #toggle+label::before{
                right: 1px;
                /* width: 122px;
                height: 60px; */
                border-radius: 60px;
                background-color: #f5f5f5;
                content: "";
                transition: background-color 0.4s;
            }
            #toggle+label::after{
                width: 58px;
                
                border-radius: 100%;
                background-color: #fff;
                content: "";
                transition: margin 0.4s;
                box-shadow: 1px 0px 5px 1px #ddd inset;
            }
            #toggle:checked + label::before{
                background-color: green;
            }
            #toggle:checked + label::after{
                margin-left: 62px;
            }
            .test{
                width: 100px;
                height: 100px;
                position: relative;
            }
            .box{
                position: absolute;
                display: block;
                
                left: 1px;
                top: 1px;
                bottom: 1px;
                right: 1px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
    <div>
        <input type="checkbox" id="toggle">
        <label for="toggle"></label>
    </div>
    <div class="test">
        <div class="box"></div>
    </div>
    </body>
</html>

本案例中，以label::before作为切换按钮的卡槽，label::after作为按钮的小圆球。

利用css选择器:checked进行切换，改变切换前后label::before,和label::after的样式，即可实现切换效果。

备注：在设计before，和after伪元素的尺寸时，作为子元素，而且设置了position:absolute属性，当设置了left,top,right,bottom属性后，子元素的宽、高就确定了。

 

posted on 2017-06-27 10:47  西风瘦马justin  阅读(1074)  评论(0)  编辑  收藏  举报