Slide switch effect CSS3 slide switch "Pure CSS3 code Realization Slide Switch effect-CSS3 sliding effect-css3 left and right slide

Today, I saw a blog post about the CSS3 incident, and then I sorted out the relevant information on a whim. Click the button to achieve the sliding effect of the switch.

Today, I saw a blog post about the CSS3 incident, and then I sorted out the relevant information on a whim. Click the button to achieve the sliding effect of the switch.

Today, I saw a blog post about the CSS3 incident, and then I sorted out the relevant information on a whim. Click the button to achieve the sliding effect of the switch.

. Toggle input:checked +. SS Div {
Transform:translate3d (60px, 0, 0);
Background-color: #fff;
}
. has-switch {
Display:inline-block;
Cursor:pointer;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
BORDER:1PX solid;
Border-color:rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25);
position:relative;
Text-align:left;
Overflow:hidden;
line-height:8px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
User-select:none;
min-width:100px;
}
. has-switch > Div.switch-on {
left:0%;
}
. has-switch > Div.switch-animate {
-webkit-transition:left 0.5s;
-moz-transition:left 0.5s;
-o-transition:left 0.5s;
Transition:left 0.5s;
}
. has-switch > Div {
Display:inline-block;
width:150%;
position:relative;
top:0;
}
. Has-switch Span.switch-left {
Color: #ffffff;
text-shadow:0 -1px 0 rgba (0, 0, 0, 0.25);
Background-color: #005fcc;
Background-image:-moz-linear-gradient (Top, #0044cc, #0088cc);
Background-image:-webkit-gradient (linear, 0 0, 0 100%, from (#0044cc), to (#0088cc));
Background-image:-webkit-linear-gradient (Top, #0044cc, #0088cc);
Background-image:-o-linear-gradient (Top, #0044cc, #0088cc);
Background-image:linear-gradient (to bottom, #0044cc, #0088cc);
Background-repeat:repeat-x;
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ff0044cc ', endcolorstr= ' #ff0088cc ', gradienttype=0);
Border-color: #0088cc #0088cc #005580;
Border-color:rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25);
Filter:progid:DXImageTransform.Microsoft.gradient (enabled = False);
}
. Has-switch Span.switch-left {
-webkit-border-top-left-radius:4px;
-moz-border-radius-topleft:4px;
border-top-left-radius:4px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-bottomleft:4px;
border-bottom-left-radius:4px;
}
. Has-switch span {
Text-align:center;
Z-index:1;
width:33%;
}
. Has-switch span,. Has-switch Label {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
Cursor:pointer;
position:relative;
Display:inline-block;
height:100%;
padding-bottom:4px;
padding-top:4px;
font-size:14px;
line-height:20px;
}
. Has-switch Label {
Text-align:center;
Margin-top: -1px;
Margin-bottom: -1px;
z-index:100;
width:34%;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
Color: #ffffff;
text-shadow:0 -1px 0 rgba (0, 0, 0, 0.25);
Background-color: #f5f5f5;
Background-image:-moz-linear-gradient (Top, #ffffff, #e6e6e6);
Background-image:-webkit-gradient (linear, 0 0, 0 100%, from (#ffffff), to (#e6e6e6));
Background-image:-webkit-linear-gradient (Top, #ffffff, #e6e6e6);
Background-image:-o-linear-gradient (Top, #ffffff, #e6e6e6);
Background-image:linear-gradient (to bottom, #ffffff, #e6e6e6);
Background-repeat:repeat-x;
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffffffff ', endcolorstr= ' #ffe6e6e6 ', gradienttype=0);
Border-color: #e6e6e6 #e6e6e6 #bfbfbf;
Border-color:rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25);
Filter:progid:DXImageTransform.Microsoft.gradient (enabled = False);
}
. Has-switch span,. Has-switch Label {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
Cursor:pointer;
position:relative;
Display:inline-block;
height:100%;
padding-bottom:4px;
padding-top:4px;
font-size:14px;
line-height:20px;
}
. Has-switch Span.switch-right {
Color: #333333;
text-shadow:0 1px 1px rgba (255, 255, 255, 0.75);
Background-color: #f0f0f0;
Background-image:-moz-linear-gradient (Top, #e6e6e6, #ffffff);
Background-image:-webkit-gradient (linear, 0 0, 0 100%, from (#e6e6e6), to (#ffffff));
Background-image:-webkit-linear-gradient (Top, #e6e6e6, #ffffff);
Background-image:-o-linear-gradient (Top, #e6e6e6, #ffffff);
Background-image:linear-gradient (to bottom, #e6e6e6, #ffffff);
Background-repeat:repeat-x;
Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #ffe6e6e6 ', endcolorstr= ' #ffffffff ', gradienttype=0);
Border-color: #ffffff #ffffff #d9d9d9;
Border-color:rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25);
Filter:progid:DXImageTransform.Microsoft.gradient (enabled = False);
}
. Has-switch span {
Text-align:center;
Z-index:1;
width:33%;
}
. Has-switch span,. Has-switch Label {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
Cursor:pointer;
position:relative;
Display:inline-block;
height:100%;
padding-bottom:4px;
padding-top:4px;
font-size:14px;
line-height:20px;
}
. Has-switch Input[type=checkbox] {
Display:none;
}
. has-switch > Div.switch-off {
Left:-50%;
}

HTMLPart

<div class= "Switch Has-switch" >
    <div class= "switch-on switch-animate" ><input type= "checkbox" checked= "" >
        <span class= "Switch-left" >ON</span><label>
        &nbsp;</label><span class= "Switch-right" >OFF</span>
    </div>
</div>

JS section

<script src= "Jquery.min.js" ></script>
<script>
    $ (function () {
       var animate=$ (". Switch-animate");
        Animate.on ("click", Function () {
            if ($ (this). Hasclass ("switch-on")) {
                $ (this). Removeclass ("switch-on"). AddClass ("Switch-off");
            }
            else {
                $ (this). addclass ("switch-on"). Removeclass ("Switch-off");
            }
        })

    })
</script>

Slide switch effect CSS3 slide switch "Pure CSS3 code Realization Slide Switch effect-CSS3 sliding effect-css3 left and right slide