Home > Article > Web Front-end > Use CSS3 to simulate the IOS sliding switch effect

Use CSS3 to simulate the IOS sliding switch effect

不言Original: 2018-06-20 16:47:131874browse

This article mainly introduces the effect of CSS3 simulated IOS sliding switch in detail, which has certain reference value. Interested friends can refer to it

Preface

The H5 site needs the effect of the IOS sliding button. After thinking about it, it seems that CSS3 can be used, so I just toyed with it... It is quite simple.. Please see the comment

Effect

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: &#39;&#39;;   
            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>
    <p 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>
    </p>
</body>

</html>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

Use css3 to create a butterfly flapping its wings code

Use CSS3 to implement WeChat-like chat bubbles

The above is the detailed content of Use CSS3 to simulate the IOS sliding switch effect. For more information, please follow other related articles on the PHP Chinese website!

php css3 ios

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implement navigation bar using html and CSS3Next article：Implement navigation bar using html and CSS3

See more

Use CSS3 to simulate the IOS sliding switch effect

Related articles