效果预览

在线演示

按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。

https://codepen.io/zhang-ou/pen/zjoOgX

可交互视频教程

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/cPvMzTg

源代码下载

本地下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox

代码解读

定义 dom,是嵌套了3层的容器:

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

居中显示:

html,
body,
.checkbox,
.checkbox .inner,
.checkbox .inner .toggle {
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: 40px;
}

画出内侧椭圆:

.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: '';
position: absolute;
height: 80%;
width: 80%;
background: linear-gradient(whitesmoke, silver);
border-radius: 50%;
}

在按钮上写上 OFF,行高是根据父元素的高度计算出的:

.checkbox .inner .toggle::before {
content: 'OFF';
text-align: center;
line-height: calc(3.5em * 0.8);
font-family: sans-serif;
color: gray;
}

引入jquery:

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

编写脚本,在点击按钮时切换样式类:

$(document).ready(function() {
$('.toggle').click(function() {
$('.inner').toggleClass('active');
});
});

设置 active 时控件的样式:

.checkbox .inner.active {
background: linear-gradient(green, limegreen);
} .checkbox .inner.active .toggle {
left: 30%;
} .checkbox .inner.active .toggle::before {
content: 'ON';
color: limegreen;
}

最后,为按钮设置缓动时间,实现动画效果

.checkbox .inner .toggle {
transition: 0.5s;
}

大功告成!

知识点

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

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

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

    原文地址:https://segmentfault.com/a/1190000014638655 HTML代码: <html> <head> <link rel=&quo ...

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

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

  3. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  4. 如何用css实现一个三角形?

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

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

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

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

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

  7. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  8. 一个Activity掌握Design新控件 (转)

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

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

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

随机推荐

  1. P1648 看守

    传送门 以二维的两个点\((x1,y1),(x2,y2)\)为例,那么他们之间的曼哈顿距离肯定为一下四个之一\((x1-x2)+(y1-y2)\),\((x2-x1)+(y1-y2)\),\((x1- ...

  2. P1226神经网络

    提交了7次,看了无数题解,要死啊~~~.(无限吐槽这道题...) 据说是Toposort,我其实也不是很清楚,反正BFS就可以过:写题之前先把题看懂: 根据公式,因为入度为零的点不会被传递,所以阈值是 ...

  3. Apache Zeppelin是什么?

    Apache Zeppelin提供了web版的类似ipython的notebook,用于做数据分析和可视化.背后可以接入不同的数据处理引擎,包括spark, hive, tajo等,原生支持scala ...

  4. hdu1598 find the most comfortable road 枚举+最小生成树

    #include<cstdio> #include<cstring> #include<algorithm> #define MAXN 210 #define IN ...

  5. Angular4项目,默认的package.json创建及配置

        1.使用如下命令,可以创建一个默认的 package.json npm  init     创建后如下图所示: 添加 angular4 的 dependencies: npm install@ ...

  6. Sublime Text 3列编辑

    Sublime Text 3 的列编辑方式如下 1.使用鼠标 (Ubuntu 14.04验证通过) 不同的平台要使用不同的鼠标按钮: 1.1 OS X 鼠标左键 + Option 或: 鼠标中键 添加 ...

  7. VMware Workstation虚拟磁盘文件备份或移植

    一.备份快照 1> 1.点击虚拟机上面的快速备份按钮 2.填写快照名字和备注 快照就生成了. 2>恢复 1.点击恢复按钮,此按钮的功能是直接恢复到上一次备份的节点. 2.或者选后面一个按钮 ...

  8. req.getParameter()无法获取参数(附前端json序列化)

    问题:前端用Ajax的post方式想servlet传递参数,servlet的getParameter()方法无法获取参数. 前端代码: $.ajax({ url: '/TestWeb/addBook' ...

  9. Suricata的性能

    不多说,直接上干货! 见官网 https://suricata.readthedocs.io/en/latest/performance/index.html Docs » 7. Performanc ...

  10. Mysql多表联合更新、删除

    UPDATE snyts_user u INNER JOIN snyts_order o ON u.user_id = o.user_id INNER JOIN snyts_refund_order ...