滑塊按鈕-渣圖.gif
<a >查看demo</a>
<html>結(jié)構(gòu)
<body>
<div class="toggle-wrapper">
<input type="checkbox" id="dn" class="dn">
<label for="dn" class="toggle">
<span class="toggle-handler"></span>
</label>
</div>
</body>
先整理一下，這個(gè)按鈕的層。
分層.gif
<css>樣式
body {
background: #eee;
}
/*--用絕對定位讓整個(gè)按鈕在頁面垂直居中--*/
.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中的貝塞爾曲線，是生成速度曲線的函數(shù)，規(guī)定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。
cubic-bezier(0.445, 0.05, 0.55, 0.95)曲線的形狀是下圖左邊這樣子的：
cubic-bezier(0.445, 0.05, 0.55, 0.95).png
它和
ease-in-out的運(yùn)動曲線差不多，由慢到快再慢。x1, y1 表示粉色圓點(diǎn)的坐標(biāo);
x2, y2 表示藍(lán)色圓點(diǎn)的坐標(biāo)。
cubic-bezier(0.42, 0，0.58, 1).png
查看cubic-bezier 曲線的網(wǎng)址：http://cubic-bezier.com/#.44,.05,.55,.95
.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);
}
需要給點(diǎn)擊后有過渡效果的元素都添加 transition。 在這個(gè)按鈕中包括：toggle／ toggle-handler ／ toggle: before ／toggle: after。
