请使用firefox,chrome等最新浏览器浏览本站。

组件美化- 滑动开关

css3 阿豹 1103次浏览 4个评论 扫描二维码

效果图:
QQ截图20160203101039
QQ截图20160203104910

代码:
index.html

<div class="u-witchBtn">
   <input type="checkbox" value="" id="agree1" />
   <label for="agree1"></label>
</div>

css

.u-witchBtn{
    width: 80px;
    height: 26px;
    background: #333;
    margin: 20px auto;
    position: relative;
    border-radius: 50px;
    box-shadow: "inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2)";
}

.u-witchBtn:after {
    content: 'OFF';
    color: #000;
    position: absolute;
    right: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}

.u-witchBtn:before {
    content: 'ON';
    color: #00bf00;
    position: absolute;
    left: 10px;
    z-index: 0;
    font: 12px/26px Arial, sans-serif;
    font-weight: bold;
}

.u-witchBtn label {
    display: block;
    width: 34px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    background: #fcfff4;
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 50px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
}

.u-witchBtn input[type=checkbox] {
    visibility: hidden;
}

.u-witchBtn input[type=checkbox]:checked + label {
    left: 43px;
}

转载请注明组件美化- 滑动开关
喜欢 (8)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(4)个小伙伴在吐槽
  1. honey,how are you
    3566882016-02-06 12:23 回复
  2. It's not bad
    3566882016-02-10 15:17 回复
  3. 看一看来瞧一瞧,这个博客真是好!
    益群网2016-02-27 10:48 回复