就是这个开关，代码是从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. 随滚动条滚动的居中div

    <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. asp.net 使用HttpModule记录全局错误

    以前使用Global.asax记录全局的错误日志觉得挺好用,但是如果一个解决方案下有N多个项目,每个下边都需要加一个并且代码都还是重复的,终于有一天无法再忍受这种模式,考虑到HttpModule,直接 ...

  3. SSRS(rdl报表)分页显示表头和冻结表头

    <TablixRowHierarchy>          <TablixMembers>            <TablixMember>            ...

  4. mvc中HttpPost理解

    public ActionResult Delete(int id) { Book book = db.Book.Find(id); if (book == null) { //重定向到行动(跳转到i ...

  5. 使用CSS来显示XML

    实现效果学号 姓名 班级 课程 教师 表格背景设为绿色,单元格居中显示 学号部分,蓝色字体,16磅大小: 姓名部分红色字体,带有下划线,12磅大小 班级课程名,教师,绿色字体,12磅大小 XML代码: ...

  6. 自定义构造方法和description方法

    知识回顾在第5讲中已经介绍了如何定义类和创建并初始化对象,比如有Student这个类1.Student.h 1 #import <Foundation/Foundation.h>23@in ...

  7. C语言－进制

    本文目录 • 一.十进制 • 二.二进制 • 三.八进制 • 四.十六进制 • 五.进制总结 • 六.变量与进制 • 七.printf的简单使用上一讲简单介绍了常量和变量,这讲补充一点计算机的基础知识 ...

  8. JSP基础——关于中文乱码问题

    乱码问题十分烦人,今天在写一个登陆的demo时,表单中需要提交的中文姓名,如下代码 <form action="success.jsp" name="success ...

  9. QF——关于iOS的强引用，弱引用及strong,retain,copy,weak,assignd的关系

    强引用和弱引用: 我们已经知道OC中的内存管理是通过“引用计数器”来实现的.一个对象的生命周期取决于它是否还被其他对象引用(是否retainCount=0).但在有些情况下,我们并不希望对象的销毁时间 ...

  10. mysql函数操作(2)

    <?php $dbh = new PDO('mysql:dbname=testdb;host=localhost', 'mysql_user', 'mysql_pwd'); $dbh->s ...