就是这个开关，代码是从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. JavaScript 中的面向对象的初步认识

    我在学习JS的面向对象编程的时候,总是有两个奇怪的问题. 第一个就是:面向对象在JS中很少用到... 可能是目前自己做的项目还是比较简单,前端方面的任务我几乎都是用面向过程的方式写的,所以就导致,我啃 ...

  2. 浅谈C中的指针和数组（三）

    上一个博客我们得到了一个结论: 指针和数组根本就是两个完全不一样的东西.只是它们都可以“以指针形式”或“以下标形式”进行访问.一个是完全的匿名访问,一个是典型的具名+匿名访问.一定要注意的是这个“以X ...

  3. python----设置默认编码

    问题:python的默认编码是ascii.在处理中文的时候可能会出现乱码的情况:这个时候我们就需要把编码设置为对应的编码了. 解决方案: 对python文件的头部做如下修改 import sys re ...

  4. row_number() over (partition by....order by...)用法 分组排序

    row_number() over (partition by....order by...)用法 分组排序 row_number() OVER (PARTITION BY COL1 ORDER BY ...

  5. 解密电子书之三：MCU（君正）

    汉王科技,早先使用的是Marvell的Xscal(ARM架构).而后据说出于功耗与价格的考虑,汉王旗下的全线产品,除了双品牌的T61(ALEX)以外,都使用北京君正提供的产品.君正的4740,基于MI ...

  6. 发布MFC ActiveX控件并实现自动更新

    一．        引言 上一篇我们讲了如何使用 VC 2005来开发 MFC ActiveX控件,我们开发 ActiveX控件最终目的是将 ActiveX控件发布出来并嵌入在 Web网页中,随着控件 ...

  7. opensatck　在启动的时候注入额外的信息

    在配置ceph的时候建议使用metadata/cloud-init来注入额外的信息. https://raymii.org/s/tutorials/Automating_Openstack_with_ ...

  8. E=MC2 - 搜搜百科

    E=MC2 - 搜搜百科 1 E=MC2 质能等价理论是爱因斯坦狭义相对论的最重要的推论,即著名的方程式E=mC^2,式中E为能量,m为质量,C为光速:也就是说,一切物质都潜藏着质量乘于光速平方的能量 ...

  9. MySql数据库连接池

    1.传统链接(如下为示意图) 注意: (1).传统方式找DriverManager要连接,数目是有限的. (2).传统方式的close(),并没有将Connection重用,只是切断应用程序和数据库的 ...

  10. Java操作mongoDB2.6的常见API使用方法

    对于mongoDB而言,学习方式和学习关系型数据库差不太多 開始都是学习怎样insert.find.update.remove,然后就是分页.排序.索引,再接着就是主从复制.副本集.分片等等 最后就是 ...