Objective
H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释
Effect
Code
<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><TITLE>CSS3 Analog iOS switch</Title><StyleType="Text/css"Media="Screen" > /* ========================================================================== Set the root element font size ========================== ================================================ */Html{Font-size: 100px;}/* ========================================================================== Set the wrap layer of the mock element, decorate ... No eggs with ========================================================================== * *. Ios-checkbox{Height4rem;Width4rem;PositionAbsoluteLeft50%;Top50%;-webkit-transform:Translate (-50%,-50%);TransformTranslate (-50%,-50%);Border.05rem Dashed#3DB7A9;Display-webkit-box;Display-webkit-flex;Display-ms-flexbox;DisplayFlex-webkit-box-orient:Horizontal;-webkit-box-direction:Normal-webkit-flex-direction:Column-ms-flex-direction:ColumnFlex-direction:Column-webkit-flex-wrap:NoWrap-ms-flex-wrap:NoWrapFlex-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:CenterAlign-items:Center}/* ========================================================================== label tag analog button ======================== ================================================== */. Emulate-ios-button{DisplayBlockWidth 2rem;Height 1rem;Background #ccc;Border-radius: 5rem;CursorPointerPositionRelative-webkit-transition:All.3s ease;TransitionAll.3s ease;}/* ========================================================================== set Pseudo-class, to realize the simulation slider slide, the transition with transition to achieve, Translatez to force enable hardware rendering ========================================================================== */. Emulate-ios-button: After{Content ‘‘;DisplayBlockWidth.9rem;Height.9rem;Border-radius: 100%;Background #fff;Box-shadow: 01px1pxRgba0,0,0,.1);PositionAbsoluteLeft.05rem;Top.05rem;-webkit-transform:Translatez (0);TransformTranslatez (0);-webkit-transition:All.3s ease;TransitionAll.3s ease;}. Emulate-ios-button: Active: After{Width 1.1rem;}/* ========================================================================== set Raw-checkbox, visually visually compare ============= ============================================================= */. Raw-checkbox{Height2rem;Width2rem;}. Raw-checkbox: Checked+label{Background #34bf49;}/* Here is the pseudo-element offset, the initial is 0.9+0.05, so here 1.05rem */. Raw-checkbox: Checked+label: After{Left 1.05rem;}. Raw-checkbox: Checked+label: Active: After{Left.5rem;}. Raw-checkbox:d Isabled+label{Background #d5d5d5;Pointer-events:None}. Raw-checkbox:d Isabled+label: After{Background #bcbdbc;}</Style></Head><Body><Divclass="Ios-checkbox" ><input type= "checkbox" id= "Ios-checkbox" Span class= "Hljs-attribute" >name= "Emulate-ios-button" Class= "Raw-checkbox" > <label Span class= "Hljs-attribute" >for= "Ios-checkbox" class= "Emulate-ios-button" ></label> </div></ Body></HTML>
Summarize
For a more intuitive comparison, I didn't hide the raw checkbox. ~~~~
CSS3 analog iOS Slide switch