原文地址：https://segmentfault.com/a/1190000014638655

HTML代码：

<html>

    <head>

        <link rel="stylesheet" href="index.css">

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    </head>

    <body>

        <div class="checkbox">

            <div class="inner">

                <div class="toggle"></div>

            </div>

        </div>

        <script src="index.pack.js"></script>

    </body>

</html>

CSS代码：

/* */

/* 居中显示： */

html,

body,

.checkbox,

.checkbox .inner,

.checkbox .inner .toggle {

    margin:;

    padding:;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* 画出外侧椭圆： */

.checkbox {

    width: 10em;

    height: 5em;

    background: linear-gradient(silver, whitesmoke);

    border-radius: 2.5em;

    font-size: 30px;

}

/* 画出内侧椭圆 */

.checkbox .inner {

    width: 8em;

    height: 3.5em;

    background: linear-gradient(dimgray, silver);

    border-radius: 2em;

    box-shadow: inset 0 0 1.5em rgba(0, 0, 0, 0.5);

}

/* 画出圆形按钮： */

.checkbox .inner .toggle {

    width: 3.5em;

    height: 3.5em;

    background: linear-gradient(to top, silver, whitesmoke);

    border-radius: 50%;

    box-shadow: 0 0.4em 0.6em rgba(0, 0, 0, 0.2);

    position: relative;

    left: -30%;

}

/* 为圆形按钮增加立体效果： */

.checkbox .inner .toggle::before {

    content: 'OFF';

    position: absolute;

    width: 80%;

    height: 80%;

    background: linear-gradient(silver, whitesmoke);

    border-radius: 50%;

    text-align: center;

    line-height: calc(3.5em * 0.8);

    font-family: sans-serif;

    color: gray;

}

/* 设置 active 时控件的样式: */

.checkbox .inner.active {

    background: linear-gradient(green, limegreen);

}

.checkbox .inner.active .toggle {

    left: 30%;

}

.checkbox .inner.active .toggle::before {

    content: 'ON';

    color: limegreen;

}

JS代码：

$(document).ready(function() {

    $('.toggle').click(function() {

        $('.inner').toggleClass('active');

    });

});

5.用 CSS 创作一个立体滑动 toggle 交互控件的更多相关文章

  1. 如何用 CSS 创作一个立体滑动 toggle 交互控件

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视 ...

  2. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  5. 一个Activity掌握Design新控件 （转）

    原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364 谷歌在推出Android5.0的同时推出了全新的设计Material Desig ...

  6. 一个Bootstrap风格的分页控件

      http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...

  7. ArcGIS“一个或多个ActiveX控件无法显示...”问题的解决方案

    ArcMap启动时的一个警告信息“一个或多个ActiveX控件无法显示...”,如图 出现这种情况,有可能的原因是IE浏览器的安全选项设置被修改了.比如被手动修改过,或者被第三方系统杀毒优化软件修改了 ...

  8. 创建一个带模版的用户控件 V.3

    再重构此篇<创建一个带模版的用户控件  V.2>http://www.cnblogs.com/insus/p/4164149.html 让其它动态实现header,Item和Footer. ...

  9. 创建一个带模版的用户控件 V.2

    前面有做练习<创建一个带模版的用户控件>http://www.cnblogs.com/insus/p/4161544.html .过于简化.通常使用数据控件Repeater会有网页写好He ...

随机推荐

  1. 弱也有弱的ACM经历

    作为一名弱校的acm渣渣,在经历了三年的acm生涯后,现在终于要毕业了,最后也来总结下自己在这几年中做acm的经历与感受.以下是参赛总结: 2013年: ACM/ICPC长沙邀请赛(打铁=_=) AC ...

  2. MySQL--Delete语句别名+LIMIT

    在MySQL中,可以使用LIMIT来限制删除的数量,但部分写法并不支持LIMIT. LIMIT方式 对于查询: ; 可以转换成: ; 别名方式: ## 使用别名 DELETE T FROM T1 AS ...

  3. 转 update关联更新在sqlserver和oracle中的实现

    sqlserver和oracle中实现update关联更新的语法不同,都可以通过inline view(内嵌视图)来实现,总的来说sqlserver更简单些. 测试例子如下: create table ...

  4. 4.图像sensor的特性和驱动解析

    修改 摄像头SDK中支持的sensor需要做的事 例如:ar0130 --> ov9712 1.修改加载load3518e脚本的参数 vi /etc/profile ./load3518e -i ...

  5. 整理开源协议问题 GPL APACHE

    整理开源协议问题 GPL APACHE APACHE 和 GPL 互相不兼容. APACHE 不可以使用 GPL 的代码. 但是 APACHE 可以调用 GPL 组件的接口. 比如 Linux 和 A ...

  6. ResourceBundle介绍

    介绍: ResourceBundle类主要作用是读取属性文件,读取属性文件时可以直接指定属性文件的名称(指定名称时不需要文件的后缀),也可以根据Locale所指定的区域码来选取指定的资源文件: Res ...

  7. pysonar

    为了看懂王垠Pysonar,我应该掌握哪些知识? 我希望自己做出一个Python的静态类型检查工具,就像Pysonar所做的那样,只是我还想扩展更多的功能.我应该如何学习?   Erlang里的Dia ...

  8. Linux 命令英文全称

    Linux 命令英文全称 linux 命令 英文全称 sudo superuser do su swith user df Disk free,空余硬盘 du Disk usage,硬盘使用率 noh ...

  9. yarn 知识点

    yarn 与 npm 功能对应表格: 命令 yarn npm 初始化 yarn init npm init 安装项目所有包(注意) yarn npm install 添加 dependencies y ...

  10. Visual Event ：快速查看 DOM 上绑定的 JS 事件

    http://web.jobbole.com/82503/ Javascript中的事件经常被认为如谜一般不可解.Javascript是一个事件驱动的语言,在这样的前提下前面的看法是很奇怪,但是说到它 ...