前端每日实战:5# 视频演示如何用 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/
相关推荐
ZillahV0 2016-08-27
yaocong 2019-07-01
武林半侠 2019-06-28
ajhongshaorou 2019-06-28
武林半侠 2019-06-28
ArthursL 2019-06-28
乔乔 2016-07-20
xiuping0 2016-07-19
t0ckh 2011-08-24
liwusen 2019-06-27
黑色幽默 2013-12-02
83453065 2012-12-20
83500391 2012-10-19
JeWangZhe 2012-03-15
每天积累一点点 2011-03-08
81423067 2018-03-03
80473064 2017-06-10
yfisaboy 2015-06-09
85443563 2019-04-26