DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> CSS3模擬IOS滑動開關效果
CSS3模擬IOS滑動開關效果
編輯：關於CSS     

前言

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

效果

代碼

XML/HTML Code復制內容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>CSS3模擬IOS開關</title>  
  7.     <style type="text/css" media="screen">  
  8.        /* ==========================================================================   
  9.                         設置根元素字體大小   
  10.        ========================================================================== */   
  11.         html {   
  12.             font-size: 100px;   
  13.         }   
  14.         /* ==========================================================================   
  15.                         設置模擬元素的包裹層,裝飾...毫無卵用   
  16.        ========================================================================== */   
  17.        .ios-checkbox{   
  18.             height:4rem;   
  19.             width:4rem;   
  20.             position:absolute;   
  21.             left:50%;   
  22.             top:50%;   
  23.             -webkit-transform:translate(-50%, -50%);   
  24.                     transform:translate(-50%, -50%);   
  25.             border:.05rem dashed #3DB7A9;   
  26.             display:-webkit-box;   
  27.             display:-webkit-flex;   
  28.             display:-ms-flexbox;   
  29.             display:flex;   
  30.             -webkit-box-orient:horizontal;   
  31.             -webkit-box-direction:normal;   
  32.             -webkit-flex-direction:column;   
  33.                 -ms-flex-direction:column;   
  34.                     flex-direction:column;   
  35.             -webkit-flex-wrap:nowrap;   
  36.                 -ms-flex-wrap:nowrap;   
  37.                     flex-wrap:nowrap;   
  38.             -webkit-justify-content:space-around;   
  39.                 -ms-flex-pack:distribute;   
  40.                     justify-content:space-around;   
  41.             -webkit-box-align:center;   
  42.             -webkit-align-items:center;   
  43.                 -ms-flex-align:center;   
  44.                     align-items:center;   
  45.        }   
  46.         /* ==========================================================================   
  47.                     label標簽模擬按鈕            
  48.        ========================================================================== */   
  49.         .emulate-ios-button {   
  50.             display: block;   
  51.             width: 2rem;   
  52.             height: 1rem;   
  53.             background: #ccc;   
  54.             border-radius: 5rem;   
  55.             cursor: pointer;   
  56.             position: relative;   
  57.             -webkit-transition: all .3s ease;   
  58.             transition: all .3s ease;   
  59.         }   
  60.   
  61.         /* ==========================================================================   
  62.                     設置偽類,來實現模擬滑塊滑動,過渡用了transition來實現 ,   
  63.                     translateZ來強制啟用硬件渲染      
  64.        ========================================================================== */   
  65.   
  66.         .emulate-ios-button:after {   
  67.             content: '';   
  68.             display: block;   
  69.             width: .9rem;   
  70.             height: .9rem;   
  71.             border-radius: 100%;   
  72.             background: #fff;   
  73.             box-shadow: 0 1px 1px rgba(0, 0, 0, .1);   
  74.             position: absolute;   
  75.             left: .05rem;   
  76.             top: .05rem;   
  77.             -webkit-transform:translateZ(0);       
  78.             transform:translateZ(0);   
  79.             -webkit-transition: all .3s ease;     
  80.             transition: all .3s ease;   
  81.         }   
  82.   
  83.         .emulate-ios-button:active:after {   
  84.             width: 1.1rem;   
  85.         }   
  86.   
  87.       /* ==========================================================================   
  88.                     設置raw-checkbox,視覺直觀比較    
  89.        ========================================================================== */   
  90.         .raw-checkbox{   
  91.             height:2rem;   
  92.             width:2rem;   
  93.         }   
  94.   
  95.         .raw-checkbox:checked+label {   
  96.             background: #34bf49;   
  97.         }   
  98.   
  99.         /* 這裡是偽元素偏移,初始是0.9+0.05 ,所以這裡1.05rem */   
  100.         .raw-checkbox:checked+label:after {   
  101.             left: 1.05rem;   
  102.         }   
  103.   
  104.         .raw-checkbox:checked+label:active:after {   
  105.             left: .5rem;   
  106.         }   
  107.   
  108.   
  109.         .raw-checkbox:disabled+label {   
  110.             background: #d5d5d5;   
  111.             pointer-events: none;   
  112.         }   
  113.   
  114.         .raw-checkbox:disabled+label:after {   
  115.             background: #bcbdbc;   
  116.         }   
  117.   
  118.     </style>  
  119. </head>  
  120.   
  121. <body>  
  122.     <div class="ios-checkbox">  
  123.         <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">  
  124.         <label for="ios-checkbox" class="emulate-ios-button"></label>  
  125.     </div>  
  126. </body>  
  127.   
  128. </html>  
  129.   

總結

為了更直觀的比較,raw checkbox我就沒有隱藏了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。

關於CSS
CSS控制div寬度最大寬度/高度和最小寬度/高度的方法
在網頁制作中經常要控制div寬度最大寬度/高度或者最小寬度/高度，但是在IE6中很多朋友都會遇到不兼
用CSS設計高用戶體驗的web文字大小
在開發網絡應用時，沒有比外觀更重要的事情了。所以，如果發現設計人員十分關注字體及字體大小，我不會感到
div和span、relative和absolute、display和visibility區別
div和span、relative和absolute、display和visibility是很容易混

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
5個CSS書寫技巧 詳解CSS五種方式實現Footer置底 CSS如何定義一條水平虛線? 史上最全的CSS hack方 CSS3制作hover下劃線動畫 DIV+CSS常見的錯誤 IE6下兼容性常見的幾個問題與解決方法 利用css繪制三角形的方法及拓展 利用CSS3實現單選框動畫特效示例代碼 CSS3實現各種圖形的示例代碼
熱門推薦
ie7中overflow:auto無效的解決方法 DIV+CSS常見的錯誤 8個簡單實用的CSS秘訣 CSS語法手冊（六）分類屬性 web前端開發規范文檔(2014年版本) 利用CSS3把圖片變成灰色模式的實例代碼 CSS中的行為——expression CSS3動畫：5種預載動畫效果實例 關於CSS Padding那些你意想不到的用法示例
大家都在看
JQuery的$和其它JS發生沖突的快速解決方法 JS中window.open全屏命令解析及使用示例 img 半透明 處理img加半透明背景實現思路及代碼 Laravel中常見的錯誤與解決方法小結 簡單的分頁代碼js實現 AJAX：開發者新的技術天地介紹 一個解析URL及圖片地址的JS函數 Javascript類型系統之String字符串類型詳解
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved