_javascript technique of realizing sliding switch effect with pure CSS3 code

Nonsense don't say much, dazzle the effect picture and enclose the demo and source download.

The implementation effect is as follows:

View Demo Source Download

HTML Structure Code:

CSS code:

/* FORM Switch style * * Ui-switch {position:absolute; Font-size:. 16rem; right:0.07rem; top:50%; margin-top: -0.16rem; width:. 7re
M
Height:. 3rem;
Line-height:. 3rem;  }. Ui-switch Input {width:. 7rem; height:. 3rem; position:absolute; top:0;left:0; z-index:2; border:0; background:0
0;
-webkit-appearance:none; outline:0}. Ui-switch Input:before {content: '; width:. 68rem; height:. 3rem; border:1px solid #dfdfdf; Background-co
Lor: #fdfdfd;
Border-radius:. 2rem;
Cursor:pointer;
Display:inline-block;
position:relative;
Vertical-align:middle;
-webkit-box-sizing:content-box;
Box-sizing:content-box;
Border-color: #dfdfdf;
-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;
Box-shadow: #dfdfdf 0 0 0 0 inset;
-webkit-transition:border. 4s,-webkit-box-shadow 4s;
Transition:border. 4s,box-shadow 4s;
-webkit-background-clip:content-box;  Background-clip:content-box}. Ui-switch Input:checked:before {border-color: #64bd63;-webkit-box-shadow: #64bd63 0 0 0
0.16rem inset; Box-shadow: #64bd0 0 0 0.16rem inset;
Background-color: #64bd63;
Transition:border. 4s,box-shadow. 4s,background-color 1.2s;
-webkit-transition:border. 4s,-webkit-box-shadow. 4s,background-color 1.2s; Background-color: #64bd63}. ui-switch Input:checked:after {left:. 4rem}. Ui-switch Input:after {content: '; width:.3r
Em
Height:. 3rem;
Position:absolute;
top:50%;
left:0; -webkit-transform:translatey ( -50%); border-radius:100% background-color: #fff;-webkit-box-shadow:0 0.01rem 0.03rem
RGBA (0,0,0,.4);
box-shadow:0 0.01rem 0.03rem Rgba (0,0,0,.4);
-webkit-transition:left 2s; Transition:left. 2s}