前言
h5站点需要ios滑动按钮的效果,想了想似乎css3能搞起,就折腾出来了…挺简单的..请看注释
效果
代码
xml/html code
复制内容到剪贴板
<!doctypehtml><htmllang=“en”><head><metachart=“utf-8”><title>css3模拟ios开关</title><styletype=“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:.05remdashed#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-wra负数的定义p: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.3a外贸英语词汇; transition:all.3a; } /*========================================================================== 设置伪类,来实现模拟滑块滑动,过渡用了t我是天真ransition来实现, translatez来强制启用硬件渲染 ==========================================================================*/ .emulate-ios-button:after{ content:”; display:block; width:.9rem; height:.9rem; border-radius:100%; background:#fff; box-shadow:01px1pxrgba(0,0,0,.1); position:absolute; left:.05rem; top:.05rem; -webkit-transform:translatez(0); transform:translatez(0); -webkit-transition:all.3a; transition:all.3a; } .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><divclass=“ios-checkbox”><inputtype=“checkbox”id=“ios-checkbox”name=“emulate-ios-button”class=“raw-checkbox”><labelfor=“ios-checkbox”class=“emulate-ios-button”></label></div></body></html>总结
为了更直观的比较,raw checkbox我就没有隐藏了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
