zoukankan      html  css  js  c++  java
  • web之ios开关按钮

    就是这个开关,代码是从weui上拷贝出来的。 至于weui自己百度吧 ^_^~

    开关代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        .weui_switch
        {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            position: relative;
            width: 52px;
            height: 32px;
            border: 1px solid #DFDFDF;
            outline: 0;
            border-radius: 16px;
            box-sizing: border-box;
            background: #DFDFDF;
            -webkit-rtl-ordering: logical;
            -webkit-user-select: text;
            cursor: auto;
            display: inline-block;
            text-align: start;
        }
        .weui_switch:before {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 30px;
            border-radius: 15px;
            background-color: #FDFDFD;
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }
        .weui_switch:after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: #FFFFFF;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            -webkit-transition: -webkit-transform .3s;
            transition: transform .3s;
        }
        .weui_switch:checked {
            border-color: #04BE02;
            background-color: #04BE02;
        }
        .weui_switch:checked:before {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .weui_switch:checked:after {
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
        </style>
    </head>
    <body>
        <input type='checkbox' class='weui_switch'>
    </body>
    </html>
  • 相关阅读:
    DeflateStream类
    BufferedStream类
    FileStream类
    Asp.net MVC Comet 推送
    MVC 读书笔记
    MVC部署
    MVC系统过滤器、自定义过滤器
    MVC 路由规则
    MVC 模型绑定
    边双+点双模板
  • 原文地址:https://www.cnblogs.com/mablevi/p/5133742.html
Copyright © 2011-2022 走看看