css滑块开关的使用,CSS3制作滑块按钮

滑块按钮-渣图.gif

查看demo

结构

先整理一下，这个按钮的层。

分层.gif

样式

body {

background: #eee;

}

/*--用绝对定位让整个按钮在页面垂直居中--*/

.toggle-wrapper {

position: absolute;;

left: 50%;

top: 50%;

overflow: hidden;

margin-left: -60px; ／*--按钮向左移动一半的宽度--*／

margin-top: -25px;

}

.toggle-wrapper input {

position: absolute;

left: -99em; ／*--让input移动到到页面之外--*／

}

.toggle {

cursor: pointer;

display: inline-block;

position: relative;

width: 120px; ／*--按钮宽度--*／

height: 50px;

background: #D21626;

border-radius:5px;

-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

cubic-bezier 是CSS3中的贝塞尔曲线，是生成速度曲线的函数，规定是 cubic-bezier(, , , )。

cubic-bezier(0.445, 0.05, 0.55, 0.95)曲线的形状是下图左边这样子的：

cubic-bezier(0.445, 0.05, 0.55, 0.95).png

它和ease-in-out的运动曲线差不多，由慢到快再慢。

x1, y1 表示粉色圆点的坐标;

x2, y2 表示蓝色圆点的坐标。

cubic-bezier(0.42, 0，0.58, 1).png

.toggle:before, .toggle:after {

position: absolute;

line-height: 50px;

font: 14px;

font-weight: bold;

z-index: 2;

-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

}

.toggle:before {

content: "OFF";

left: 20px;

color: #D21626;

}

.toggle:after {

content: "ON";

right: 20px;

color: #fff;

}

.toggle-handler {

display: inline-block;

z-index: 1;

width: 65px;

height: 44px;

background: #fff;

position: relative;

top: 3px;

left: 3px;

border-radius: 3px;

-webkit-transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);

-webkit-transform: translateX(0px);

transform: translateX(0px);

}

input:checked + .toggle {

background: #66b317;

}

input:checked + .toggle:before {

color: #fff;

}

input:checked + .toggle:after {

color: #66b317;

}

input:checked + .toggle .toggle-handler {

width: 54px;

-webkit-transform: translateX(60px);

transform: translateX(60px);

}

需要给点击后有过渡效果的元素都添加 transition。 在这个按钮中包括：toggle／ toggle-handler ／ toggle: before ／toggle: after。