原文地址：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. HDU1081 最大字段和 压缩数组（单调队列优化）

    最大字段和题型,推荐做题顺序: HDU1003 HDU1024 HDU1081  ZOJ2975 ZOJ2067 #include<cstdio> #include<cstdlib& ...

  2. Visual Studio Code 使用指南

       安装 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. HTML Snippets:增强了zen-coding,增加了H5的自动补全,安 ...

  3. 【多线程学习笔记整理】002_线程的停止、暂停、与yield

    一.停止线程的三种方式 停止线程是多线程中的一个很重要的点,停止线程意味着在线程处理完当前任务之前终止正在做的操作,但是如果不能正确的操作,可能会发生不可预期的结果. 1)使用退出标志,使线程正常退出 ...

  4. vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）

    一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="t ...

  5. test20180922 世界第一的猛汉王

    题意 分析 由于异色点必有连边,所以一个点的covered减去两个点共有的covered就是可存在的环数,十分巧妙. 代码 #include <bits/stdc++.h> using L ...

  6. Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供（转）

    起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...

  7. oracle 获取星期日期

    oracle 中的计算如下: 计算本星期的起始结束日期--得到星期一的日期select trunc(sysdate,''DD'')-to_char(sysdate,''D'')+2 from dual ...

  8. java后台调用url

    版权声明:本文为博主牟云飞原创文章,未经博主同意不得转载. https://blog.csdn.net/myfmyfmyfmyf/article/details/32690757 QXOutStrea ...

  9. ubuntu16安装及嵌入式开发环境搭建

    1.Ubuntu虚拟机新建好要安装vmware tools才能共享文件夹,解压安装tar zxf VMwareTools-10.0.10-4301679.tar.gz ,回车键,解压该文件. 解压完毕 ...

  10. tomcat源码阅读之StandardHost和StandardEngine

    StandardHost及UML类图: 1.StandardHost类是Host接口的默认实现:其继承自ContainerBase类,说明他也是一个容器类,既然是容器类,那肯定也有管道对象PipeLi ...