CSS3制作滑块按钮
2017-05-26 本文已影响0人
巴斯光年lip
滑块按钮-渣图.gif
<a href='https://codepen.io/lip90/pen/mmgEee/'>查看demo</a>
<html>结构
<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>
先整理一下，这个按钮的层。
分层.gif
<css>样式
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(<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的运动曲线差不多，由慢到快再慢。x1, y1 表示粉色圆点的坐标;
x2, y2 表示蓝色圆点的坐标。
cubic-bezier(0.42, 0，0.58, 1).png
查看cubic-bezier 曲线的网址：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);
}
需要给点击后有过渡效果的元素都添加 transition。 在这个按钮中包括：toggle／ toggle-handler ／ toggle: before ／toggle: after。
