前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3模拟IOS开关</title>

    <style type="text/css" media="screen">

       /* ==========================================================================

                        设置根元素字体大小

       ========================================================================== */

        html {

            font-size: 100px;

        }

        /* ==========================================================================

                        设置模拟元素的包裹层,装饰...毫无卵用

       ========================================================================== */

       .ios-checkbox{

            height:4rem;

            width:4rem;

            position:absolute;

            left:50%;

            top:50%;

            -webkit-transform:translate(-50%, -50%);

                    transform:translate(-50%, -50%);

            border:.05rem dashed #3DB7A9;

            display:-webkit-box;

            display:-webkit-flex;

            display:-ms-flexbox;

            display:flex;

            -webkit-box-orient:horizontal;

            -webkit-box-direction:normal;

            -webkit-flex-direction:column;

                -ms-flex-direction:column;

                    flex-direction:column;

            -webkit-flex-wrap:nowrap;

                -ms-flex-wrap:nowrap;

                    flex-wrap:nowrap;

            -webkit-justify-content:space-around;

                -ms-flex-pack:distribute;

                    justify-content:space-around;

            -webkit-box-align:center;

            -webkit-align-items:center;

                -ms-flex-align:center;

                    align-items:center;

       }

        /* ==========================================================================

                    label标签模拟按钮

       ========================================================================== */

        .emulate-ios-button {

            display: block;

            width: 2rem;

            height: 1rem;

            background: #ccc;

            border-radius: 5rem;

            cursor: pointer;

            position: relative;

            -webkit-transition: all .3s ease;

            transition: all .3s ease;

        }

        /* ==========================================================================

                    设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,

                    translateZ来强制启用硬件渲染

       ========================================================================== */

        .emulate-ios-button:after {

            content: '';

            display: block;

            width: .9rem;

            height: .9rem;

            border-radius: 100%;

            background: #fff;

            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);

            position: absolute;

            left: .05rem;

            top: .05rem;

            -webkit-transform:translateZ(0);

            transform:translateZ(0);

            -webkit-transition: all .3s ease;

            transition: all .3s ease;

        }

        .emulate-ios-button:active:after {

            width: 1.1rem;

        }

      /* ==========================================================================

                    设置raw-checkbox,视觉直观比较

       ========================================================================== */

        .raw-checkbox{

            height:2rem;

            width:2rem;

        }

        .raw-checkbox:checked+label {

            background: #34bf49;

        }

        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */

        .raw-checkbox:checked+label:after {

            left: 1.05rem;

        }

        .raw-checkbox:checked+label:active:after {

            left: .5rem;

        }

        .raw-checkbox:disabled+label {

            background: #d5d5d5;

            pointer-events: none;

        }

        .raw-checkbox:disabled+label:after {

            background: #bcbdbc;

        }

    </style>

</head>

<body>

    <div class="ios-checkbox">

        <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">

        <label for="ios-checkbox" class="emulate-ios-button"></label>

    </div>

</body>

</html>

总结

为了更直观的比较,raw checkbox我就没有隐藏了..~~~~

CSS3模拟IOS滑动开关的更多相关文章

  1. css3模拟jq点击事件

    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...

  2. 纯CSS3模拟星体旋转效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. css3 模拟标牌震荡效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 在云中生成和模拟 iOS

    原文:在云中生成和模拟 iOS 1.原文地址 https://msdn.microsoft.com/zh-cn/library/vs/alm/dn858446.aspx

  5. 滑动开关效果 css3滑动开关】纯CSS3代码实现滑动开关效果-css3滑动效果-css3左右滑动

    今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动效果. 今天看到一篇有关 css3事件的博文,一时兴起便整理下相关的资料. 点击按钮,可以实现开关的滑动 ...

  6. 模拟iOS系统原生导航条隐藏或显示动画

    借UIView动画,使更改导航条的hidden属性这一过程动起来.悦德财富:https://yuedecaifu.com 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  7. CSS3 模拟笑脸

    参考 http://www.html5tricks.com/demo/html5-css3-smile-face/index.html 它还做了舌头... 一开始我都是用JS实现的动画  当然了  眼 ...

  8. 模拟ios应用加载页面

    1:设置应用程序系统主界面加载接口为空:Main interface=null; 2: 在AppDelegate实现didFinishLaunchingWithOptions方法 - (BOOL)ap ...

  9. 分享10款激发灵感的最新HTML5/CSS3应用

    1.HTML5/CSS3实现iOS Path菜单 菜单动画很酷 Path菜单相信大家都不陌生吧,它在iOS中非常流行,今天我们要分享的菜单就是利用HTML5和CSS3技术来模拟实现这款iOS Path ...

随机推荐

  1. luogu1262 间谍网络

    贿赂所有能贿赂的,如果还有人不被访问则显然是NO. 否则,必定为YES.强联通分量缩成一个DAG,若某点的入度为零,则答案要算上它的. #include <iostream> #inclu ...

  2. 转：模式窗口showModalDialog的用法总结

    模式窗口showModalDialog的用法总结   最近几天一直在处理模式窗口的问题,索性写了这篇总结,以供参考: 1.打开窗口:var handle = window.showModalDialo ...

  3. ogre3D学习基础11 -- 日志文件的使用与异常处理

    用文件来记录 Ogre 系统初始化.运行.结束以及调试信息.使用日志便于我们调试程序.Ogre 日志系统由两个类组成:Log 类与 LogManager. 1.Log类 Log 类的一个对象对应于一个 ...

  4. 使用xmake检测编译器特性支持

    如果我们要写跨平台的c/c++代码,很多时候需要处理由于不同编译器对c/c++各个标准支持力度不同导致的兼容性问题,一般通常的解决办法是:自己在代码中通过宏去判断各个编译器的版本.内置宏.标准库宏._ ...

  5. Spring c3p0连接池配置

    数据库连接池 数据库连接池的基本思想就是为数据库连接建立一个“缓冲池”.预先在缓冲池中放入一定数量的连接,当需要建立数据库连接时,只需从“缓冲池”中取出一个,使用完毕之后再放回去.我们可以通过设定连接 ...

  6. 【Luogu】P3768简单的数学题（杜教筛）

    题目链接 emm标题全称应该叫“莫比乌斯反演求出可狄利克雷卷积的公式然后卷积之后搞杜教筛” 然后成功地困扰了我两天qwq 我们从最基本的题意开始,一步步往下推 首先题面给出的公式是$\sum\limi ...

  7. Jersey实现Client端：GET/PUT/POST/DELETE

    原文地址:Jersey客户端API调用REST风格的Web服务 [节选] 要开始使用 Jersey 客户端 API,你首先需要创建一个 com.sun.jersey .api.client.Clien ...

  8. bzoj 5056: OI游戏 最短路树的计数

    OI游戏 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 196  Solved: 159[Submit][Status][Discuss] Descrip ...

  9. social-auth-app-django模块

    一 原文地址:http://www.cnblogs.com/adc8868/p/7665864.html social-auth-app-django模块是专门用于Django的第三方登录OAuth2 ...

  10. docker 查询或获取私有仓库(registry)中的镜像

    docker 查询或获取私有仓库(registry)中的镜像,使用 docker search 192.168.1.8:5000 命令经测试不好使. 解决: 1.获取仓库类的镜像: [root@sha ...