Heim > Artikel > Web-Frontend > CSS3 simuliert den IOS-Schiebeschaltereffekt

CSS3 simuliert den IOS-Schiebeschaltereffekt

黄舟Original: 2017-01-22 17:30:041453Durchsuche

Vorwort

Die H5-Site benötigt den Effekt der IOS-Schiebetaste. Nachdem ich darüber nachgedacht habe, scheint es, dass CSS3 möglich ist, also habe ich damit herumgespielt ... Es ist ganz einfach. Bitte siehe Kommentar

Effekt

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>

Zusammenfassung

Für einen intuitiveren Vergleich habe ich Das Raw-Kontrollkästchen wurde nicht ausgeblendet.

Das Obige ist die CSS3-Simulation des IOS-Schiebeschaltereffekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der allgemeinen CSS-Eigenschaften VierNächster Artikel：Zusammenfassung der allgemeinen CSS-Eigenschaften Vier

In Verbindung stehende Artikel

Mehr sehen