CSS3模拟IOS滑动开关

前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3模拟IOS开关</title>
    <style type="text/css" media="screen">
       /* ==========================================================================
                        设置根元素字体大小
       ========================================================================== */
        html {
            font-size: 100px;
        }
        /* ==========================================================================
                        设置模拟元素的包裹层,装饰...毫无卵用
       ========================================================================== */
       .ios-checkbox{
            height:4rem;
            4rem;
            position:absolute;
            left:50%;
            top:50%;
            -webkit-transform:translate(-50%, -50%);
                    transform:translate(-50%, -50%);
            border:.05rem dashed #3DB7A9;
            display:-webkit-box;
            display:-webkit-flex;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:horizontal;
            -webkit-box-direction:normal;
            -webkit-flex-direction:column;
                -ms-flex-direction:column;
                    flex-direction:column;
            -webkit-flex-wrap:nowrap;
                -ms-flex-wrap:nowrap;
                    flex-wrap:nowrap;
            -webkit-justify-content:space-around;
                -ms-flex-pack:distribute;
                    justify-content:space-around;
            -webkit-box-align:center;
            -webkit-align-items:center;
                -ms-flex-align:center;
                    align-items:center;
       }
        /* ==========================================================================
                    label标签模拟按钮         
       ========================================================================== */
        .emulate-ios-button {
            display: block;
             2rem;
            height: 1rem;
            background: #ccc;
            border-radius: 5rem;
            cursor: pointer;
            position: relative;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        /* ==========================================================================
                    设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
                    translateZ来强制启用硬件渲染   
       ========================================================================== */

        .emulate-ios-button:after {
            content: '';
            display: block;
             .9rem;
            height: .9rem;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: .05rem;
            top: .05rem;
            -webkit-transform:translateZ(0);    
            transform:translateZ(0);
            -webkit-transition: all .3s ease;  
            transition: all .3s ease;
        }

        .emulate-ios-button:active:after {
             1.1rem;
        }

      /* ==========================================================================
                    设置raw-checkbox,视觉直观比较 
       ========================================================================== */
        .raw-checkbox{
            height:2rem;
            2rem;
        }

        .raw-checkbox:checked+label {
            background: #34bf49;
        }

        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
        .raw-checkbox:checked+label:after {
            left: 1.05rem;
        }

        .raw-checkbox:checked+label:active:after {
            left: .5rem;
        }


        .raw-checkbox:disabled+label {
            background: #d5d5d5;
            pointer-events: none;
        }

        .raw-checkbox:disabled+label:after {
            background: #bcbdbc;
        }

    </style>
</head>

<body>
    <div class="ios-checkbox">
        <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">
        <label for="ios-checkbox" class="emulate-ios-button"></label>
    </div>
</body>

</html>

总结

为了更直观的比较,raw checkbox我就没有隐藏了..~~~~

相关阅读:
jQuery 插件开发——Menu（导航菜单）
jQuery 插件开发——PopupLayer(弹出层)
jQuery 插件开发——GridData（表格）
angularjs+requlirejs 搭建前端框架（1）
探讨js闭包
 python的特殊方法介绍
 收集TCP端口的访问延迟和丢包率
 【IT界的厨子】酱香鲈鱼
 Centos 6.5 安装Python 3.7
python技巧 python2中的除法结果为0
原文地址：https://www.cnblogs.com/libin-1/p/6006034.html