1.1 html 代码解析
<div class="checkbox"> <div class="inner" id="inner"> <div class="toggle" id="toggle"></div> </div></div>
最外层 checkbox, 是按钮的整体, inner 是o辽宁警察学院官网n下绿色框所占的区域, toggle 是能点击的 on 和 off 区域.
1.2 css 代码解析设置 body 字体和背景色
body{ margin: 0; padding: 0; font-family: sans-rif; background: #dcdcdc;}
设置按钮的背景色, 位置, 圆形边框, 上下边框颜色和厚度
.checkbox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 50px; border-radius: 25px; background: linear-gradient(0deg, #d8d8d8, #cccccc); border-top: 0.02em solid #ececec; border-bottom: 0.02em solid #ececec;}
设置 绿色底色区域 的上下左右位置, 以此确定宽度和高度, 注意, 这里没设宽度和高度, 默认是 auto
设置背景, 圆形边框, 阴影
.checkbox .inner{ position: absolute; /* 因为没设宽和高, 所以可以这样 */ top: 10px; left: 10px; right: 10px; bottom: 10px; background: linear-gradient(0deg, #a5a5a5, #717171); border-radius: 20px; box-shadow: int 0 0 15px rgba(0,0,0,.5);}
设置 on off 按钮大小, 位置, 颜色, 背景, 阴影, 顶部和底部边框样式, 设置按钮上的动画时间为 0.5s
.checkbox .inner .toggle{ position: absolute; top: -3px; left: -3px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(0deg, #ccc, #e4e4e4); box-shadow: 0 4px 6px rgba(0,0,0,.2); box-sizing: border-box; border-top: 0.04em solid #ececec; border-bottom: 0.01em solid #ececec; transition: 0.5s;}
设置 off 的样式,, 由上下左右的定位确定 宽和高, 设置背景, 圆形边框, line-height
用来设置字体垂直居中
.checkbox .inner .toggl高二班主任工作总结e:before{ content: "off"; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: linear-gradient(0deg, #e4e4e4, #ccc); border-radius: 50%; text-align: center; font-size: 10px; line-height: 28px; color: #a9a9a9;奥运会举办国家及时间}
设置 点击后按钮的字体, on, 之所有没有写其他属性, 是因为其他属性都继承 checkbox .inner .toggle:before
.checkbox .inner.active .toggle:before{ content: "on"; color: #00d22d;}
当按钮被点击, 滑块右移, 并且更改背景色, 更改时间为 0.5s
.checkbox .inner.active .toggle{ left: 47px;}.checkbox .inner.active{ background: linear-gradient(0deg, #00d22d, #158a00);}
1.3 javascript 代码解析
<script> let inner = document.getelementbyid('inner'); let toggle = inner.children[0]; toggle.addeventlistener('click', ()=>{ if(inner.classlist.contains('active')){ inner.classlist.remove('active'); }el { inner.classlist.add('active'); } })</script>首先获取到 inner 和 toggle, 一个背景色框, 一个圆形按钮给按钮 toggle 注册点击事件, 点击 on off 按钮才有效当 inner 处于 active, 也就是 inner 元素包含 active 类, 那就移除, 如果不包含, 那就添加, 反正做一个相反的操作当 inner 处于 active, toggle 会右移, inner 背景色会变换, 在 css中 设置大功告成, 过程如下图
2.1 html 源码
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <title>title</title> <link rel="stylesheet" href="2020_12_24.css"></head><body><div class="checkbox"> <div class="inner" id="inner"> <div class="toggle" id="toggle"></div> </div></div><script> let inner = document.getelementbyid('inner'); let toggle = inner.children[0]; toggle.addeventlistener('click', ()=>{ if(inner.classlist.contains('active')){ inner.classlist.remove('active'); }el { inner.classlist.add('active'); } })</script></body></html>
2.2 css 源码
body{ margin: 0; padding: 0; font-family: sans-rif; background: #dcdcdc;}.checkbox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 50px; border-radius: 25px; background: linear-gradient(0deg, #d8d8d8, #cccccc); border-top: 0.02em solid #ececec; border-bottom: 0.02em solid #ececec;}.checkbox .inner{ position: absolute; /* 因为没设宽和高, 所以可以这样 */ top: 10px; left: 10px; right: 10px; bottom: 10px; background: linear-gradient(0deg, #a5a5a5, #717171); border-radius: 20px; box-shadow: int 0 0 15px rgba(0,0,0,.5);}.checkbox .inner .toggle{ position: absolute; top: -3px; left: -3px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(0deg, #ccc, #e4e4e4); box-shadow: 0 4px 6px rgba(0,0,0,.2); box-sizing: border-box; border-top: 0.04em solid #ececec; border-bottom: 0.01em solid #ececec; transition: 0.5s;}.checkbox .inner .toggle:before{ content: "off"; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; background: linear-gradient(0deg, #e4e4e4, #ccc); border-radius: 50%; text-align: center; font-size: 10px; line-height: 28px; color: #a9a9a9;}.checkbox .inner.active .toggle:before{ content: "on"; color: #00d22d;}.checkbox .inner.active .toggle{ left: 47px;}.checkbox .inner.active{ back在家做什么赚钱ground: linear-gradient(0deg, #00d22d, #158a00);}
到此这篇关于css仿苹果平滑开关按钮效果的文章就介绍到这了,更多相关css平滑开关全国甲卷按钮内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!
本文发布于:2023-04-07 16:43:48,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/a2f3f64acf84bb9b3f206f7768f92745.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:CSS仿苹果平滑开关按钮效果.doc
本文 PDF 下载地址:CSS仿苹果平滑开关按钮效果.pdf
留言与评论(共有 0 条评论) |