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

web之ios开关按钮的更多相关文章

  1. 敬请贤者：WEB、IOS开发（2年以上经验，大专）；CTO、产品经理，运营专员 电商服装鞋饰买手（2年以上经验，服装或鞋类）；体验店店长 （2年以上经验，服装或鞋类） 工作地点：丰台南苑路；有意者小窗QQ2211788980 - V2EX

    敬请贤者:WEB.IOS开发(2年以上经验,大专):CTO.产品经理,运营专员 电商服装鞋饰买手(2年以上经验,服装或鞋类):体验店店长 (2年以上经验,服装或鞋类) 工作地点:丰台南苑路:有意者小窗 ...

  2. 移动web在ios和android下点击元素出现阴影问题

     移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...

  3. web中ios移动端软键盘收起后，页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  4. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  5. iOS开关按钮UISwitch控件

    开关按钮UISwitch 在ViewController.h里面 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #import <UIKit/UIKit ...

  6. web页面ios浏览器img图片的坑

    大家都知道ios浏览器有个默认的内置事件,就是长按屏幕,会放大预览你点击的内容. 不同浏览器效果各异,有的浏览器弹出提示框,预览图片或保存图片.主要呈下面2中形式.体验最差的就是后者,会直接将页面中的 ...

  7. 仿IOS 开关按钮

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. ios开关按钮

    .al-toggle-button{ appearance: none; -webkit-appearance: none; position: relative; width: 52px; heig ...

  9. 那些年做过的 .NET Web 项目和 iOS 之路的一些思考

    从2010年3月份出来工作到2015年初,做过的大大小小的 .NET Web 项目如下: (1)售楼系统产品    「Role: Team Member」 (2)中弘合同管理系统    「Role: ...

随机推荐

  1. 轻量级的数据交换语言（JSON）

    游戏开发过程中,很多用到JSON的地方:客户端与服务端的网络通信,程序读取客户端的数值表之类的. JSON用于描述数据结构,有以下形式存在. 对象(object):一个对象以“{”开始,并以“}”结束 ...

  2. VMWARE使用问题

    因为一些原因创建的两个虚拟机出问题了,然而里面还放了好多东西呢不想就这样删掉,就抱着试一试的心态看能不能恢复(结果真能恢复). 这里使用的方法是VMware虚拟机配置文件(.vmx)损坏修复 在这过程 ...

  3. 加密传输SSL协议6_验证公钥

    如上图所示,我怎么能确定我手里的公钥就是我心中的接收方的公钥呢?怎么防止被钓鱼呢? 解决的办法就是引入一个第三方,一个权威机构,一个我们都相信的机构. 验证公钥,Digital Certificate ...

  4. Facebook 调试工具Stetho配置入门

    I decided to spend a few hours on Stetho.Stetho is a sophisticated debug bridge for Android applicat ...

  5. 说出x的结果，并解释为什么？

    var x = 1; if(function f(){}){ x += typeof f; } x; //x的结果是? x=1undefined 首先是 if表达式的问题 if括号里,不一定非要用== ...

  6. Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理

    今天突然发现ss不能使用了.经过一系列排查发现 Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理,如上图. 修改注册表值HKEY_LOCAL_MAC ...

  7. 如何获取浏览器的DNS解析时间

    上一篇博客提到09年初WED团队开发的浏览器环境检测工具时,忘记说这个是aoao同学的创意了.不过没关系,据说他又在秘密规划新版本了,再据说新版要增加的DNS解析时间计算已经开发完成,点上面那个链接就 ...

  8. linux 开通ftp账号

    1.更新yum源 首先需要更新系统的yum源,便捷工具下载地址:http://help.aliyun.com/manual?spm=0.0.0.0.zJ3dBU&helpId=1692 2.安 ...

  9. Day01

    1.@Test函数,执行后控制台没有输出结果? 1)  不能用静态方法,控制台会没有结果. 2)  不能把类名命名为Test,@Test不识别. 2.遍历Map集合的entrySet方法不会? 3.使 ...

  10. 视频日志之android的总结与思考

    四月份开始学android,并着手做这个项目,腾讯面试实习忙了半个月没有再做最终铩羽而归.做到5月30日,做了一个交差版,停下了差不多一个月,这两天再捡起完善一点. 项目是做一个视频保存和分享的网站, ...