web之ios开关按钮

最新推荐文章于 2020-12-22 04:29:44 发布

diaoxian0745

最新推荐文章于 2020-12-22 04:29:44 发布

阅读量99

点赞数 1

原文链接：http://www.cnblogs.com/mablevi/p/5133742.html

版权

就是这个开关，代码是从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>

转载于:https://www.cnblogs.com/mablevi/p/5133742.html

diaoxian0745

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web之ios开关按钮

就是这个开关，代码是从weui上拷贝出来的。至于weui自己百度吧 ^_^~开关代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &...
复制链接

扫一扫