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的值不同做出不同的事件处理
  • 相关阅读:
    GridView, ListView 区别
    ActivityGroup和TabActiviy的差异性?
    Java加密解压
    Android代码中实现WAP方式联网
    SVN创建资源库和远程连接配置
    高仿优酷Android客户端图片左右滑动(自动切换)
    andoid 多线程断点下载
    Android中用Java代码实现zip文件解压缩
    JAVA两种实现二分查找方式
    三种JAVA编程方法实现斐波那契数列
  • 原文地址:https://www.cnblogs.com/zhengao/p/7365442.html
Copyright © 2011-2022 走看看