android系统的滑动按钮相信大家都使用过。这款插件就是使用纯css3制作出类似android系统的滑动按钮效果。

HTML

html代码十分简单。使用一个大的div作为包裹容器，给它一个class toggle用于控制样式，一个Id switch 用于使用js来控制动画。

CSS

html{height: 95%;}

body{height: 95%;background-color: #141219;}

#switch{

top: 25%;

left: 50%;

width: 75px;

height: 40px;

}

.toggle{

position: absolute;

border: 2px solid #444249;

border-radius: 20px;

-webkit-transition: border-color .6s ease-out;

transition: border-color .6s ease-out;

box-sizing: border-box;

}

.toggle.toggle-on{

border-color: rgba(137, 194, 217, .4);

-webkit-transition: all .5s .15s ease-out;

transition: all .5s .15s ease-out;

}

.toggle-button{

position: absolute;

top: 4px;

width: 28px;

bottom: 4px;

right: 39px;

background-color: #444249;

border-radius: 19px;

cursor: pointer;

-webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s;

transition: all .3s .1s, width .1s, top .1s, bottom .1s;

}

.toggle-on .toggle-button{

top: 3px;

width: 65px;

bottom: 3px;

right: 3px;

border-radius: 23px;

background-color: #89c2da;

box-shadow: 0 0 16px #4b7a8d;

-webkit-transition: all .2s .1s, right .1s;

transition: all .2s .1s, right .1s;

}

.toggle-text-on{

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

line-height: 36px;

text-align: center;

font-family: 'Quicksand', sans-serif;

font-size: 18px;

font-weight: normal;

cursor: pointer;

-webkit-user-select: none; /* Chrome/Safari */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* IE10+ */

color: rgba(0,0,0,0);

}

.toggle-on .toggle-text-on{

color: #3b6a7d;

-webkit-transition: color .3s .15s ;

transition: color .3s .15s ;

}

.toggle-text-off{

position: absolute;

top: 0;

bottom: 0;

right: 6px;

line-height: 36px;

text-align: center;

font-family: 'Quicksand', sans-serif;

font-size: 14px;

font-weight: bold;

-webkit-user-select: none; /* Chrome/Safari */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* IE10+ */

cursor: pointer;

color: #444249;

}

.toggle-on .toggle-text-off{color: rgba(0,0,0,0);}

/* used for streak effect */

.glow-comp{

position: absolute;

opacity: 0;

top: 10px;

bottom: 10px;

left: 10px;

right: 10px;

border-radius: 6px;

background-color: rgba(75, 122, 141, .1);

box-shadow: 0 0 12px rgba(75, 122, 141, .2);

-webkit-transition: opacity 4.5s 1s;

transition: opacity 4.5s 1s;

}

.toggle-on .glow-comp{

opacity: 1;

-webkit-transition: opacity 1s;

transition: opacity 1s;

}

使用jQuery来切换class控制滑动动画效果。

$('.toggle').click(function(e){

e.preventDefault(); // The flicker is a codepen thing

$(this).toggleClass('toggle-on');

});

以上就是这个滑动按钮效果的所有代码。