久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

CSS3如何模擬IOS實現(xiàn)滑動開關(guān)效果

這篇文章主要介紹CSS3如何模擬IOS實現(xiàn)滑動開關(guān)效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站是一家專業(yè)提供平城企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都做網(wǎng)站、H5場景定制、小程序制作等業(yè)務(wù)。10年已為平城眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進行中。

前言

H5站點需要IOS滑動按鈕的效果,想了想似乎CSS3能搞起,就折騰出來了...挺簡單的..請看注釋

效果

CSS3如何模擬IOS實現(xiàn)滑動開關(guān)效果

代碼

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8">  
    <title>CSS3模擬IOS開關(guān)</title>  
    <style type="text/css" media="screen">  
       /* ==========================================================================   
                        設(shè)置根元素字體大小   
       ========================================================================== */   
        html {   
            font-size: 100px;   
        }   
        /* ==========================================================================   
                        設(shè)置模擬元素的包裹層,裝飾...毫無卵用   
       ========================================================================== */   
       .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標簽?zāi)M按鈕            
       ========================================================================== */   
        .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;   
        }   
  
        /* ==========================================================================   
                    設(shè)置偽類,來實現(xiàn)模擬滑塊滑動,過渡用了transition來實現(xiàn) ,   
                    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;   
        }   
  
      /* ==========================================================================   
                    設(shè)置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實現(xiàn)滑動開關(guān)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：CSS3如何模擬IOS實現(xiàn)滑動開關(guān)效果
本文來源：http://sd-ha.com/article14/ihhide.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、App設(shè)計、App開發(fā)、網(wǎng)站改版、網(wǎng)站設(shè)計公司、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護公司