CSS3模拟IOS滑动开关效果

互联网
在放大镜下，你可以看到每一片雪花都是一幅幅精美的图案：有的是晶莹的薄片，有的像白亮的银针，有的像一把张开的小扇，有的像夜空的星星……

前言

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

效果

代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  4. <head>
  5. <metacharset="UTF-8">
  6. <title>CSS3模拟IOS开关</title>
  7. <styletype="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:.05remdashed#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.3sease;
  58. transition:all.3sease;
  59. }
  61. /*==========================================================================
  62. 设置伪类,来实现模拟滑块滑动,过渡用了transition来实现,
  63. translateZ来强制启用硬件渲染
  64. ==========================================================================*/
  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:01px1pxrgba(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.3sease;
  80. transition:all.3sease;
  81. }
  83. .emulate-ios-button:active:after{
  84. width:1.1rem;
  85. }
  87. /*==========================================================================
  88. 设置raw-checkbox,视觉直观比较
  89. ==========================================================================*/
  90. .raw-checkbox{
  91. height:2rem;
  92. width:2rem;
  93. }
  95. .raw-checkbox:checked+label{
  96. background:#34bf49;
  97. }
  99. /*这里是伪元素偏移,初始是0.9+0.05,所以这里1.05rem*/
  100. .raw-checkbox:checked+label:after{
  101. left:1.05rem;
  102. }
  104. .raw-checkbox:checked+label:active:after{
  105. left:.5rem;
  106. }
  109. .raw-checkbox:disabled+label{
  110. background:#d5d5d5;
  111. pointer-events:none;
  112. }
  114. .raw-checkbox:disabled+label:after{
  115. background:#bcbdbc;
  116. }
  118. </style>
  119. </head>
  121. <body>
  122. <divclass="ios-checkbox">
  123. <inputtype="checkbox"id="ios-checkbox"name="emulate-ios-button"class="raw-checkbox">
  124. <labelfor="ios-checkbox"class="emulate-ios-button"></label>
  125. </div>
  126. </body>
  128. </html>

总结

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

以上就是CSS3模拟IOS滑动开关效果。我们不是“居安思危”，而是“居危思进”。更多关于CSS3模拟IOS滑动开关效果请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
15行CSS代码让苹果设备崩溃,最新的iOS 12也无法幸免