zoukankan      html  css  js  c++  java
  • css 滑动按钮样式

    <div class="pub_switch_box">
    <input type="checkbox" id="pub_switch_a1" class="pub_switch" />
    <label for="pub_switch_a1"></label>
    <input type="checkbox" id="pub_switch_a2" class="pub_switch" checked />
    <label for="pub_switch_a2"></label>
    </div>


    /*滑动按钮样式 <-- start --> */
    .pub_switch_box {
    font-size: 0;
    display: inline-block;
    margin-left: 30%;
    }

    .pub_switch {
    display: none;
    }

    .pub_switch + label {
    display: inline-block;
    position: relative;
    56px;
    height: 26px;
    margin: 5px;
    background-color: #fafbfa;
    border-radius: 50px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    }

    .pub_switch + label:after {
    content:"";
    position: absolute;
    top: 0;
    100%;
    height: 100%;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
    }

    .pub_switch + label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    z-index: 999999;
    26px;
    height: 26px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.3);
    background: white;
    }

    .pub_switch:active + label:after {
    box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
    }
    .pub_switch:active + label:before {
    37px;
    }
    .pub_switch:checked:active + label:before {
    37px;
    left: 20px;
    }
    .pub_switch + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .pub_switch:checked + label:before {
    content: "";
    position: absolute;
    left: 31px;
    border-radius: 100px;
    }
    .pub_switch:checked + label:after {
    content: "";
    font-size: 1.5em;
    position: absolute;
    background: #3399ff;
    box-shadow: 0 0 1px #3399ff;
    }
    /* <-- end --> */

  • 相关阅读:
    Python使用MySQL数据库的方法以及一个实例
    【转载】关于Python中的yield
    利用KMeans聚类进行航空公司客户价值分析
    Python多线程编程
    搜索与排名思路整理
    两个UIView添加同一个手势只有最后一个有用
    缩放动画效果
    iOS通过UIAlertController弹出底部选择框来调用相机或者相册
    ios webview点击图片看大图效果及相应手势操作
    iOS开发:获取设备IP地址
  • 原文地址:https://www.cnblogs.com/y-lin/p/5728398.html
Copyright © 2011-2022 走看看