如何用 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 ...
随机推荐
- hdu 1573 X问题【扩展中国剩余定理】
扩展中国剩余定理的板子,合并完之后算一下范围内能取几个值即可(记得去掉0) #include<iostream> #include<cstdio> #include<cm ...
- (2)javascript的基本语法、数据结构、变量
本篇学习资料主要讲解javascript的基本语法.数据结构.变量 无论是传统的编程语言,还是脚本语言,都具有数据类型.常量和变量.运算符.表达式.注释语句.流程控制语句等基本元素构成,这些 ...
- 第十六篇 .NET高级技术之序列化
.net framework的类库中提供了三个可以用于序列化和反序列化的类,分别为BinaryFormatter.SoapFormatter和XmlSerializer. BinaryFormatte ...
- 进程动态拦截注入API HOOK
最近工作中遇到一个问题,需要通过程序界面进行判断程序的运行状态,刚开始认为很简单,不就是一个窗体控件获取,获取Button的状态和Text.刚好去年干过该事情,就没太在意,就把优先级排到后面了,随着项 ...
- RobotFramework自动化测试框架(3)- RobotFramework扩展测试库、资源文件、变量文件
扩展测试库 扩展测试库可使用python或java语言编写.后直接导入需要使用的测试用例文件即可. 具体的实现和操作,后续补充.请参考官网. 资源文件 在资源文件中定义用户关键字,它提供了共享机制,即 ...
- the little schemer 笔记(0)
the little schemer 笔记 Z.X.L 2012年08月13日 五项规则 car的规则car只对非空列表有定义. cdr的规则cdr只对非空列表有定义.任何非空列表的cdr是另外一个列 ...
- 2017年“嘉杰信息杯” 中国大学生程序设计竞赛全国邀请赛 Highway
Highway Accepted : 122 Submit : 393 Time Limit : 4000 MS Memory Limit : 65536 KB Highway In ICPC ...
- Kruskal HDOJ 1233 还是畅通工程
题目传送门 /* 最小生成树之kruskal算法--并查集(数据结构)实现 建立一个结构体,记录两点和它们的距离,依照距离升序排序 不连通就累加距离,即为最小生成树的长度 */ #include &l ...
- 题解报告:hdu 2141 Can you find it?(二分)
Problem Description Give you three sequences of numbers A, B, C, then we give you a number X. Now yo ...
- 记录Jmeter集成Jenkins运行Ant做接口监听
最近在鼓捣Jmeter的接口测试,把他集成到了Jenkins上做自动化接口监听.把操作记录下来. 首先就是进行接口测试的编写.打开Jmeter.主要是把接口的测试逻辑和断言处理调通后就OK了,接口程序 ...