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 --> */

  • 相关阅读:
    k-means算法
    偏差-方差分解Bias-Variance Decomposition
    常见machine learning模型实现
    Bag-of-words模型、TF-IDF模型
    atomic原子操作
    oc 计算 带括号 式子
    oc 基本语法 类 静态变量 常量
    通过文件头标识判断图片格式
    十大经典排序算法最强总结(含JAVA代码实现)(转)
    JPEG格式 介绍
  • 原文地址:https://www.cnblogs.com/y-lin/p/5728398.html
Copyright © 2011-2022 走看看