css模拟手机滑动开关

最新推荐文章于 2024-02-04 09:00:00 发布

十一路客

最新推荐文章于 2024-02-04 09:00:00 发布

阅读量810

点赞数

分类专栏： css 文章标签： css

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

参考文章：
http://www.cnblogs.com/libin-1/p/6006034.html

示例代码：

<!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;
            width: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标签模拟按钮     ============================================= */
        /*设置label样式*/
        .emulate-ios-button {
            display: block;

            /*设置绿色滑道的大小*/
            width: 1rem;
            height: .5rem;

            background: #ccc;
            border-radius: 5rem;
            cursor: pointer;
            position: relative;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        /* ============== 设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
        translateZ来强制启用硬件渲染 ======== */
        /*在label中添加白色圆按钮*/
        .emulate-ios-button:after {
            content: '';
            display: block;

            /* 设置白色圆按钮的大小 */
            width: .4rem;
            height: .4rem;

            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 {
            width: 1.1rem;
        }

        /* ============== 设置raw-checkbox,视觉直观比较 ============================ */
        .raw-checkbox{

            height:2rem;
            width:2rem;
        }

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

        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
        .raw-checkbox:checked+label:after {
            /*设置开启时白色按钮的位置*/ 
            left: 0.55rem;
        }

        /*此句可以去掉*/
        .raw-checkbox:checked+label:active:after {
            /*设置关闭时白色按钮的位置*/
            left: .5rem;
        }

        /*设置checkbox为无效时 相应label的样式*/
        .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" style = "display:none"> 
        <label for="ios-checkbox" class="emulate-ios-button"></label>
    </div>
</body>

</html>

相关知识点理解：
(1):before 和：after伪元素：
在元素前或后添加内容
凡是页面装修的元素都可以用伪元素来实现，不受文档约束，也不影响文档本身（比如，不影响 DOM），只影响最终的样式。
伪对象:after有一个很重要的用法–清除浮动。
这种清除浮动的方法几乎成了一个固定的模式。很多大型网站里面都有用到。
以下代码：

.elementCls:after{
    clear:both;
    content:".";
    height:0;
    visibility:hidden;
}

(2):active 伪类向激活（在鼠标点击与释放之间发生的事件）的元素添加特殊的样式。

(3)当点击<label for="cb_add_favorite">时，光标焦点会定位到id="cb_add_favorite"为的元素上。这样方便用户操作！

(4)>尖括号选择子元素
+ 加号选择相邻兄弟节点

十一路客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录