栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

CSS3模拟IOS滑动开关效果

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

代码

XML/HTML Code复制内容到剪贴板
  1.   
  2.   
  3.   
  4.   
  5.       
  6.     CSS3模拟IOS开关  
  7.       
  8.           
  9.         html {   
  10.             font-size: 100px;   
  11.         }   
  12.            
  13.        .ios-checkbox{   
  14.             height:4rem;   
  15.             width:4rem;   
  16.             position:absolute;   
  17.             left:50%;   
  18.             top:50%;   
  19.             -webkit-transform:translate(-50%, -50%);   
  20.                     transform:translate(-50%, -50%);   
  21.             border:.05rem dashed #3DB7A9;   
  22.             display:-webkit-box;   
  23.             display:-webkit-flex;   
  24.             display:-ms-flexbox;   
  25.             display:flex;   
  26.             -webkit-box-orient:horizontal;   
  27.             -webkit-box-direction:normal;   
  28.             -webkit-flex-direction:column;   
  29.                 -ms-flex-direction:column;   
  30.                     flex-direction:column;   
  31.             -webkit-flex-wrap:nowrap;   
  32.                 -ms-flex-wrap:nowrap;   
  33.                     flex-wrap:nowrap;   
  34.             -webkit-justify-content:space-around;   
  35.                 -ms-flex-pack:distribute;   
  36.                     justify-content:space-around;   
  37.             -webkit-box-align:center;   
  38.             -webkit-align-items:center;   
  39.                 -ms-flex-align:center;   
  40.                     align-items:center;   
  41.        }   
  42.            
  43.         .emulate-ios-button {   
  44.             display: block;   
  45.             width: 2rem;   
  46.             height: 1rem;   
  47.             background: #ccc;   
  48.             border-radius: 5rem;   
  49.             cursor: pointer;   
  50.             position: relative;   
  51.             -webkit-transition: all .3s ease;   
  52.             transition: all .3s ease;   
  53.         }   
  54.   
  55.            
  56.   
  57.         .emulate-ios-button:after {   
  58.             content: '';   
  59.             display: block;   
  60.             width: .9rem;   
  61.             height: .9rem;   
  62.             border-radius: 100%;   
  63.             background: #fff;   
  64.             box-shadow: 0 1px 1px rgba(0, 0, 0, .1);   
  65.             position: absolute;   
  66.             left: .05rem;   
  67.             top: .05rem;   
  68.             -webkit-transform:translateZ(0);       
  69.             transform:translateZ(0);   
  70.             -webkit-transition: all .3s ease;     
  71.             transition: all .3s ease;   
  72.         }   
  73.   
  74.         .emulate-ios-button:active:after {   
  75.             width: 1.1rem;   
  76.         }   
  77.   
  78.          
  79.         .raw-checkbox{   
  80.             height:2rem;   
  81.             width:2rem;   
  82.         }   
  83.   
  84.         .raw-checkbox:checked+label {   
  85.             background: #34bf49;   
  86.         }   
  87.   
  88.            
  89.         .raw-checkbox:checked+label:after {   
  90.             left: 1.05rem;   
  91.         }   
  92.   
  93.         .raw-checkbox:checked+label:active:after {   
  94.             left: .5rem;   
  95.         }   
  96.   
  97.   
  98.         .raw-checkbox:disabled+label {   
  99.             background: #d5d5d5;   
  100.             pointer-events: none;   
  101.         }   
  102.   
  103.         .raw-checkbox:disabled+label:after {   
  104.             background: #bcbdbc;   
  105.         }   
  106.   
  107.       
  108.   
  109.   
  110.   
  111.       
  112.           
  113.           
  114.     
  
  •   
  •   
  •   
  •   
  • 总结

    为了更直观的比较,raw checkbox我就没有隐藏了。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

    转载请注明:文章转载自 www.mshxw.com
    本文地址:https://www.mshxw.com/it/215623.html

    CSS教程相关栏目本月热门文章

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号:晋ICP备2021003244-6号