CSS3 simulates IOS sliding switch effect-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

CSS3 simulates IOS sliding switch effect

Jan 22, 2017 pm 05:30 PM

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 tossed it out... It's quite simple.. Please see the comment

Effect

CSS3 simulates IOS sliding switch effect

Code

<!DOCTYPE html>  

    <html>  

      

    <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>  

        <div>  

            <input type="checkbox" id="ios-checkbox" name="emulate-ios-button">  

            <label for="ios-checkbox"></label>  

        </div>  

    </body>  

      

    </html>

Copy after login

Summary

For a more intuitive comparison, I have not hidden the raw checkbox.

The above is the content of CSS3 simulating the IOS sliding switch effect. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!

Statement of this Website

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