就是这个开关，代码是从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. EBS 开发中如何动态启用和禁止请求（Current Request）的参数

    EBS 开发中如何动态启用和禁止请求(Current Request)的参数 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 我们可以使用依赖 ...

  2. Vnstat: 简单实用的网络流量统计工具

    官方主页: http://humdi.net/vnstat # Ubuntu 安装: (其本上其它发行版的包管理程序中也都包含了这款软件,请自行安装) sudo apt-get install vns ...

  3. Flink资料（6） -- 如何添加一个新的Operator

    false false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable {mso-style-n ...

  4. 14.java.lang.EOFException

    java.lang.EOFException 文件已结束异常 当程序在输入的过程中遇到文件或流的结尾时,引发异常.因此该异常用于检查是否达到文件或流的结尾

  5. Top free and open source log management software

    As mentioned in the previous post, in my quest to find an alternative to Kiwi Syslog, I looked at a ...

  6. 你会用shuffle打乱列表吗？

    在网站上我们经常会看到关键字云(Word Cloud)和标签云(Tag Cloud),用于表明这个关键字或标签是经常被查阅的,而且还可以看到这些标签的动态运动,每次刷新都会有不一样的关键字或便签,让浏 ...

  7. 2016 Multi-University Training Contest 3 总结

    又是多校总结时间. 这两天重感冒,精神不佳,总结一拖再拖,结果到了多校第四场结束后回来总结第三场.不过因为还在补第三场的题,所以还是记得挺清楚的 欣君说决定自己AFK试试,于是全程读题算公式. 欣君翻 ...

  8. [LeetCode][Python]15：3Sum

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 15: 3Sumhttps://oj.leetcode.com/problem ...

  9. python-操作hive

    python访问hive2 HiveServer2为客户端在远程执行hive查询提供了接口,通过Thrift RPC来实现,还提供了多用户并发和认证功能.目前使用python的用户可以通过pyhs2这 ...

  10. Android4.0设置界面改动总结（三）

    Android4.0设置界面改动总结大概介绍了一下设置改tab风格,事实上原理非常easy,理解两个基本的函数就可以: ①.invalidateHeaders(),调用此函数将又一次调用onBuild ...