Slide switch effect css3 slide switch] Pure CSS3 code sliding switch effect-css3 sliding effect-css3 Slide left and right, css3-css3

Slide switch effect css3 slide switch] Pure CSS3 code sliding switch effect-css3 sliding effect-css3 Slide left and right, css3-css3

Today, I saw a blog post on the css3 event and sorted out relevant materials on the rise. Click the button to slide the switch.

Today, I saw a blog post on the css3 event and sorted out relevant materials on the rise. Click the button to slide the switch.

Today, I saw a blog post on the css3 event and sorted out relevant materials on the rise. Click the button to slide 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.5 s;
-Moz-transition: left 0.5 s;
-O-transition: left 0.5 s;
Transition: left 0.5 s;
}
. 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 = '# ffffff', 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 = '# ffffff', GradientType = 0 );
Border-color: # 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>

JsPart

<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>