如何用 CSS 创作一个立体滑动 toggle 交互控件
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/zjoOgX
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 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;
}
大功告成!
知识点
- linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
- box-shadow https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
- calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
- ::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
- jquery toggleClass http://api.jquery.com/toggleclass/
原文地址:https://segmentfault.com/a/1190000014638655
如何用 CSS 创作一个立体滑动 toggle 交互控件的更多相关文章
- 5.用 CSS 创作一个立体滑动 toggle 交互控件
原文地址:https://segmentfault.com/a/1190000014638655 HTML代码: <html> <head> <link rel=&quo ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 如何用css实现一个三角形?
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 一个Activity掌握Design新控件 (转)
原文地址:http://blog.csdn.net/lavor_zl/article/details/51295364 谷歌在推出Android5.0的同时推出了全新的设计Material Desig ...
- 一个Bootstrap风格的分页控件
http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...
随机推荐
- P1648 看守
传送门 以二维的两个点\((x1,y1),(x2,y2)\)为例,那么他们之间的曼哈顿距离肯定为一下四个之一\((x1-x2)+(y1-y2)\),\((x2-x1)+(y1-y2)\),\((x1- ...
- P1226神经网络
提交了7次,看了无数题解,要死啊~~~.(无限吐槽这道题...) 据说是Toposort,我其实也不是很清楚,反正BFS就可以过:写题之前先把题看懂: 根据公式,因为入度为零的点不会被传递,所以阈值是 ...
- Apache Zeppelin是什么?
Apache Zeppelin提供了web版的类似ipython的notebook,用于做数据分析和可视化.背后可以接入不同的数据处理引擎,包括spark, hive, tajo等,原生支持scala ...
- hdu1598 find the most comfortable road 枚举+最小生成树
#include<cstdio> #include<cstring> #include<algorithm> #define MAXN 210 #define IN ...
- Angular4项目,默认的package.json创建及配置
1.使用如下命令,可以创建一个默认的 package.json npm init 创建后如下图所示: 添加 angular4 的 dependencies: npm install@ ...
- Sublime Text 3列编辑
Sublime Text 3 的列编辑方式如下 1.使用鼠标 (Ubuntu 14.04验证通过) 不同的平台要使用不同的鼠标按钮: 1.1 OS X 鼠标左键 + Option 或: 鼠标中键 添加 ...
- VMware Workstation虚拟磁盘文件备份或移植
一.备份快照 1> 1.点击虚拟机上面的快速备份按钮 2.填写快照名字和备注 快照就生成了. 2>恢复 1.点击恢复按钮,此按钮的功能是直接恢复到上一次备份的节点. 2.或者选后面一个按钮 ...
- req.getParameter()无法获取参数(附前端json序列化)
问题:前端用Ajax的post方式想servlet传递参数,servlet的getParameter()方法无法获取参数. 前端代码: $.ajax({ url: '/TestWeb/addBook' ...
- Suricata的性能
不多说,直接上干货! 见官网 https://suricata.readthedocs.io/en/latest/performance/index.html Docs » 7. Performanc ...
- Mysql多表联合更新、删除
UPDATE snyts_user u INNER JOIN snyts_order o ON u.user_id = o.user_id INNER JOIN snyts_refund_order ...