css 如何实现一个左右滑动的按钮呢?


摘要:
下文讲述使用css脚本实现一个“左右滑动”的开关按钮的方法分享,如下所示:

实现思路: 
    修改checkbox的样式信息,模拟出滑动开关效果

例:

<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>开</em>
                        <em>关</em>
                    </span>
                </span>
            </label>
        </div>
    </body>
</html>
css实现一个左右滑动开关的示例分享

css实现一个左右滑动开关的示例分享