zoukankan      html  css  js  c++  java
  • CSS实现OFF-ON开关按钮

    1.利用css实现开关按钮

    效果图如下所示:

    2.HTML代码

    3.css代码
    .testswitch {
        position: relative;
        float: left;
        45px;
        margin: 0;
        font-size: 0.6em;
    }

    .testswitch-checkbox {
        display: none;
    }

    .testswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border-radius: 20px;
    }

    .testswitch-inner {
        display: block;
        200%;
        margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
        text-align: left;
    }

    .testswitch-inner::before,
    .testswitch-inner::after {
        display: block;
        float: right;
        50%;
        height: 20px;
        padding: 0;
        line-height: 1.8em;
        font-size: 8px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .testswitch-inner::after {
        content: attr(data-on);
        padding-left: 10px;
        background-color: #FFAB47;
        color: #FFFFFF;
    }

    .testswitch-inner::before {
        content: attr(data-off);
        padding-right: 10px;
        background-color: #3F9FE8;
        color: white;
        text-align: right;
    }

    .testswitch-switch {
        position: absolute;
        display: block;
        12px;
        height: 12px;
        margin: 4px;
        background: #FFFFFF;
        bottom: 5px;
        border-radius: 20px;
        transition: all 0.3s ease-in 0s;
        text-align: right;
    }

    .testswitch-checkbox:checked+.testswitch-label .testswitch-inner {
        margin-left: 0;
    }

    .testswitch-checkbox:checked+.testswitch-label .testswitch-switch {
        right: 0px;
    }
    4.根据off和on的值不同做出不同的事件处理
  • 相关阅读:

    80老婆如何制服老公的
    男人三件事
    抄袭了一篇散文,很适合现在的我.
    讲个小笑话
    博客的性别???测试下!!!
    十八禁 大全 [转载]
    [转载]男人你没房没车,我凭什么嫁给你!
    电脑维修 小产业高利润
    一美女莫名晕倒 被七男强行拖入森林
  • 原文地址:https://www.cnblogs.com/zhengao/p/7365442.html
Copyright © 2011-2022 走看看