今天给大家介绍一款仿ios7的switches开关按钮。这款按钮也是纯css实现的。无需引js代码。在实现中给出了两种颜色,三种不同大小的demo。一起看下效果图：
实现的代码。
html代码：
复制代码<div class=”wrap” style=”width: 600px; margin: auto;”>
<h1>
iOS 7 style switches with CSS</h1>
<h2>
By Bandar Raffah</h2>
<label>
Big<input type=”checkbox” class=”ios-switch green bigswitch” checked /><div>
<div>
</div>
</div>
</label>
<label>
<input type=”checkbox” class=”ios-switch bigswitch” checked /><div>
<div>
</div>
</div>
</label>
<label>
Normal<input type=”checkbox” class=”ios-switch green” /><div>
<div>
</div>
</div>
</label>
<label>
<input type=”checkbox” class=”ios-switch” /><div>
<div>
</div>
</div>
</label>
<label>
Tiny<input type=”checkbox” class=”ios-switch green tinyswitch” checked /><div>
<div>
</div>
</div>
</label>
<label>
<input type=”checkbox” class=”ios-switch tinyswitch” checked /><div>
<div>
</div>
</div>
</label>
</div>
css代码：
复制代码input[type=”checkbox”] {
position: absolute;
opacity: 0;
}
/* Normal Track */
input[type=”checkbox”].ios-switch + div
{
vertical-align: middle;
width: 40px;
height: 20px;
border: 1px solid rgba(0,0,0,.4);
border-radius: 999px;
background-color: rgba(0, 0, 0, 0.1);
-webkit-transition-duration: .4s;
-webkit-transition-property: background-color, box-shadow;
box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
margin: 15px 1.2em 15px 2.5em;
}
/* Checked Track (Blue) */
input[type=”checkbox”].ios-switch:checked + div
{
width: 40px;
background-position: 0 0;
background-color: #3b89ec;
border: 1px solid #0e62cd;
box-shadow: inset 0 0 0 10px rgba(59,137,259,1);
}
/* Tiny Track */
input[type=”checkbox”].tinyswitch.ios-switch + div
{
width: 34px;
height: 18px;
}
/* Big Track */
input[type=”checkbox”].bigswitch.ios-switch + div
{
width: 50px;
height: 25px;
}
