CSS3模拟IOS滑动开关效果

来源：动视网责编：小采时间：2020-11-27 18:53:24

CSS3模拟IOS滑动开关效果

CSS3模拟IOS滑动开关效果:前言H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释效果代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3模

推荐度：

点击下载本文 文档为doc格式

导读CSS3模拟IOS滑动开关效果:前言H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释效果代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3模

前言

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

效果

代码

<!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: ''; 

 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>

总结

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

CSS3模拟IOS滑动开关效果

推荐度：

点击下载本文 文档为doc格式

标签：开关效果 css3

热门焦点

CSS3模拟IOS滑动开关效果

CSS3模拟IOS滑动开关效果

CSS3模拟IOS滑动开关效果

最新推荐

猜你喜欢

热门推荐