CSS3如何模拟IOS实现滑动开关效果

这篇文章主要介绍CSS3如何模拟IOS实现滑动开关效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站是一家专业提供平城企业网站建设,专注与成都网站设计、成都做网站、H5场景定制、小程序制作等业务。10年已为平城众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

前言

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

效果

CSS3如何模拟IOS实现滑动开关效果

代码

XML/HTML Code复制内容到剪贴板

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

以上是“CSS3如何模拟IOS实现滑动开关效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

当前名称：CSS3如何模拟IOS实现滑动开关效果
本文来源：https://www.cdcxhl.com/article14/ihhide.html

成都网站建设公司_创新互联，为您提供小程序开发、App设计、App开发、网站改版、网站设计公司、品牌网站制作

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容