开关按钮

最新推荐文章于 2021-05-12 11:20:42 发布

爱编程的兔子

最新推荐文章于 2021-05-12 11:20:42 发布

阅读量579

点赞数 1

分类专栏： css 页面重构技巧

本文链接：https://blog.csdn.net/wjnf012/article/details/51970384

版权

css 同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

页面重构技巧

30 篇文章 0 订阅

订阅专栏

<div class="switch-btn">
    <input type="checkbox" class="c1" />
    <div class="switch-inner">
        <div class="btn">
            <span class="active">ON</span>
            <span class="inactive">OFF</span>
        </div>
        <div class="arrow"></div>
    </div>
</div>

.switch-btn{
    position: relative;
    width: 60px;
    height: 30px;
    overflow: hidden;
}
.switch-btn .c1{
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 30px;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    cursor: pointer;
    z-index: 10;
}
.switch-btn .switch-inner{
    position: relative;
    height: 30px;
    border-radius: 13px;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    background: #cccccc;
    transform: all 0.1s ease-in 0s ;
}
.switch-btn .switch-inner .btn{
    width:200%;
    height:30px;
    line-height:30px;
    margin-left:-100%;
    transition: margin 0.1s ease-in 0s;
}
.switch-btn .switch-inner .btn span{
    float: left;
    width: 50%;
    height: 30px;
    line-height: 30px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    font-size:12px;
}
.switch-btn .switch-inner .btn span.active{
    color:#FFFFFF;
    padding-right:26px;
    text-align:center;
}
.switch-btn .switch-inner .btn span.inactive{
    color:#FFFFFF;
    padding-left:26px;
    text-align:center;
}
.switch-btn .switch-inner .arrow {
    height:26px;
    width:26px;
    background:#FFFFFF;
    position:absolute;
    top:2px;
    right:32px;
    -moz-border-radius:100%; 
    -webkit-border-radius:100%; 
    border-radius:100%;
    transition: all 0.1s ease-in 0s;
}
.switch-btn .c1:checked + .switch-inner {
    background:#FFFF00;
}
.switch-btn .c1:checked + .switch-inner .btn {
    margin-left: 0;
}
.switch-btn .c1:checked + .switch-inner .arrow {
    right: 2px;
}