您现在的位置是：网站首页> 编程资料编程资料

CSS仿苹果平滑开关按钮效果CSS开关按钮样式详解纯CSS3实现的炫酷checkbox复选框美化库checkboxes.css(含开关按钮美化

2023-10-17 325人已围观

简介 这篇文章主要介绍了CSS仿苹果平滑开关按钮效果,本文通过实例代码给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

源码

1. 代码解析

1.1 html 代码解析

最外层 checkbox, 是按钮的整体, inner 是ON下绿色框所占的区域, toggle 是能点击的 ON 和 OFF 区域.

1.2 css 代码解析设置 body 字体和背景色

 body{ margin: 0; padding: 0; font-family: sans-serif; 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: inset 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 .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; }

设置 点击后按钮的字体, 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 代码解析

  • 首先获取到 inner 和 toggle, 一个背景色框, 一个圆形按钮
  • 给按钮 toggle 注册点击事件, 点击 ON OFF 按钮才有效
  • 当 inner 处于 active, 也就是 inner 元素包含 active 类, 那就移除, 如果不包含, 那就添加, 反正做一个相反的操作
  • 当 inner 处于 active, toggle 会右移, inner 背景色会变换, 在 css中 设置
  • 大功告成, 过程如下图


 

2. 源码

2.1 html 源码

Title

2.2 css 源码

 body{ margin: 0; padding: 0; font-family: sans-serif; 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: inset 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{ background: linear-gradient(0deg, #00d22d, #158a00); }

到此这篇关于CSS仿苹果平滑开关按钮效果的文章就介绍到这了,更多相关css平滑开关按钮内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：纯CSS解决H5布局中的吸顶吸底的实现步骤Html5导航栏吸顶方案原理与对比实现css实现5种滚动吸顶实现方式的比较(性能升级版)Html5之title吸顶功能

下一篇：CSS3.0实现霓虹灯按钮动画特效的示例代码纯CSS实现酷炫的霓虹灯效果(附demo)

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网