每日CSS_仿苹果平滑开关按钮

2020_12_24

源码

1. 代码解析

1.1 html 代码解析

  1. <div class="checkbox">
  2.   <div class="inner" id="inner">
  3.     <div class="toggle" id="toggle"></div>
  4.   </div>
  5. </div>

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

1.2 css 代码解析

  • 设置 body 字体和背景色
  1. body{
  2.   margin: 0;
  3.   padding: 0;
  4.   font-family: sans-serif;
  5.   background: #dcdcdc;
  6. }
  • 设置按钮的背景色, 位置, 圆形边框, 上下边框颜色和厚度
  1. .checkbox{
  2.   position: absolute;
  3.   top: 50%;
  4.   left: 50%;
  5.   transform: translate(-50%, -50%);
  6.   width: 100px;
  7.   height: 50px;
  8.   border-radius: 25px;
  9.   background: linear-gradient(0deg, #d8d8d8, #cccccc);
  10.   border-top: 0.02em solid #ececec;
  11.   border-bottom: 0.02em solid #ececec;
  12. }

  • 设置 绿色底色区域 的上下左右位置, 以此确定宽度和高度, 注意, 这里没设宽度和高度, 默认是 auto

    设置背景, 圆形边框, 阴影

  1. .checkbox .inner{
  2.   position: absolute;
  3.   /* 因为没设宽和高, 所以可以这样 */
  4.   top: 10px;
  5.   left: 10px;
  6.   right: 10px;
  7.   bottom: 10px;
  8.   background: linear-gradient(0deg, #a5a5a5, #717171);
  9.   border-radius: 20px;
  10.   box-shadow: inset 0 0 15px rgba(0,0,0,.5);
  11. }
  • 设置 ON OFF 按钮大小, 位置, 颜色, 背景, 阴影, 顶部和底部边框样式, 设置按钮上的动画时间为 0.5s
  1. .checkbox .inner .toggle{
  2.   position: absolute;
  3.   top: -3px;
  4.   left: -3px;
  5.   width: 36px;
  6.   height: 36px;
  7.   border-radius: 50%;
  8.   background: linear-gradient(0deg, #ccc, #e4e4e4);
  9.   box-shadow: 0 4px 6px rgba(0,0,0,.2);
  10.   box-sizing: border-box;
  11.   border-top: 0.04em solid #ececec;
  12.   border-bottom: 0.01em solid #ececec;
  13.   transition: 0.5s;
  14. }
  • 设置 OFF 的样式,, 由上下左右的定位确定 宽和高, 设置背景, 圆形边框, line-height 用来设置字体垂直居中
  1. .checkbox .inner .toggle:before{
  2.   content: "OFF";
  3.   position: absolute;
  4.   top: 4px;
  5.   left: 4px;
  6.   right: 4px;
  7.   bottom: 4px;
  8.   background: linear-gradient(0deg, #e4e4e4, #ccc);
  9.   border-radius: 50%;
  10.   text-align: center;
  11.   font-size: 10px;
  12.   line-height: 28px;
  13.   color: #a9a9a9;
  14. }
  • 设置 点击后按钮的字体, ON, 之所有没有写其他属性, 是因为其他属性都继承 checkbox .inner .toggle:before
  1. .checkbox .inner.active .toggle:before{
  2.   content: "ON";
  3.   color: #00d22d;
  4. }
  • 当按钮被点击, 滑块右移, 并且更改背景色, 更改时间为 0.5s
  1. .checkbox .inner.active .toggle{
  2.   left: 47px;
  3. }
  4. .checkbox .inner.active{
  5.   background: linear-gradient(0deg, #00d22d, #158a00);
  6. }

1.3 javascript 代码解析

  1. <script>
  2.   let inner = document.getElementById('inner');
  3.   let toggle = inner.children[0];
  4.   toggle.addEventListener('click', ()=>{
  5.     if(inner.classList.contains('active')){
  6.       inner.classList.remove('active');
  7.     }else {
  8.       inner.classList.add('active');
  9.     }
  10.   })
  11. </script>
  1. 首先获取到 inner 和 toggle, 一个背景色框, 一个圆形按钮
  2. 给按钮 toggle 注册点击事件, 点击 ON OFF 按钮才有效
  3. 当 inner 处于 active, 也就是 inner 元素包含 active 类, 那就移除, 如果不包含, 那就添加, 反正做一个相反的操作
  4. 当 inner 处于 active, toggle 会右移, inner 背景色会变换, 在 css中 设置
  5. 大功告成, 过程如下图

2. 源码

2.1 html 源码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <link rel="stylesheet" href="2020_12_24.css">
  7. </head>
  8. <body>
  9. <div class="checkbox">
  10.   <div class="inner" id="inner">
  11.     <div class="toggle" id="toggle"></div>
  12.   </div>
  13. </div>
  14. <script>
  15.   let inner = document.getElementById('inner');
  16.   let toggle = inner.children[0];
  17.   toggle.addEventListener('click', ()=>{
  18.     if(inner.classList.contains('active')){
  19.       inner.classList.remove('active');
  20.     }else {
  21.       inner.classList.add('active');
  22.     }
  23.   })
  24. </script>
  25. </body>
  26. </html>

2.2 css 源码

  1. body{
  2.   margin: 0;
  3.   padding: 0;
  4.   font-family: sans-serif;
  5.   background: #dcdcdc;
  6. }
  7. .checkbox{
  8.   position: absolute;
  9.   top: 50%;
  10.   left: 50%;
  11.   transform: translate(-50%, -50%);
  12.   width: 100px;
  13.   height: 50px;
  14.   border-radius: 25px;
  15.   background: linear-gradient(0deg, #d8d8d8, #cccccc);
  16.   border-top: 0.02em solid #ececec;
  17.   border-bottom: 0.02em solid #ececec;
  18. }
  19. .checkbox .inner{
  20.   position: absolute;
  21.   /* 因为没设宽和高, 所以可以这样 */
  22.   top: 10px;
  23.   left: 10px;
  24.   right: 10px;
  25.   bottom: 10px;
  26.   background: linear-gradient(0deg, #a5a5a5, #717171);
  27.   border-radius: 20px;
  28.   box-shadow: inset 0 0 15px rgba(0,0,0,.5);
  29. }
  30. .checkbox .inner .toggle{
  31.   position: absolute;
  32.   top: -3px;
  33.   left: -3px;
  34.   width: 36px;
  35.   height: 36px;
  36.   border-radius: 50%;
  37.   background: linear-gradient(0deg, #ccc, #e4e4e4);
  38.   box-shadow: 0 4px 6px rgba(0,0,0,.2);
  39.   box-sizing: border-box;
  40.   border-top: 0.04em solid #ececec;
  41.   border-bottom: 0.01em solid #ececec;
  42.   transition: 0.5s;
  43. }
  44. .checkbox .inner .toggle:before{
  45.   content: "OFF";
  46.   position: absolute;
  47.   top: 4px;
  48.   left: 4px;
  49.   right: 4px;
  50.   bottom: 4px;
  51.   background: linear-gradient(0deg, #e4e4e4, #ccc);
  52.   border-radius: 50%;
  53.   text-align: center;
  54.   font-size: 10px;
  55.   line-height: 28px;
  56.   color: #a9a9a9;
  57. }
  58. .checkbox .inner.active .toggle:before{
  59.   content: "ON";
  60.   color: #00d22d;
  61. }
  62. .checkbox .inner.active .toggle{
  63.   left: 47px;
  64. }
  65. .checkbox .inner.active{
  66.   background: linear-gradient(0deg, #00d22d, #158a00);
  67. }

每日CSS_仿苹果平滑开关按钮的更多相关文章

  1. 8个超炫酷仿苹果应用的HTML5动画

    苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...

  2. 一款基于的jQuery仿苹果样式焦点图插件

    这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款 ...

  3. 仿苹果系统应用的apk

    仿苹果系统应用的apk 韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 收集了好久的仿苹果IOS7全套apk - Android安卓综合 ...

  4. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...

  6. 每日CSS_实时时钟效果

    每日CSS_实时时钟效果 2020_12_22 源码链接 1. 代码解析 1.1 html 代码片段 <div class="clock"> <div class ...

  7. 每日CSS_发光文本效果

    每日CSS_发光文本效果 2020_12_22 源码 1. 代码解析 1.1 html 代码片段 <h1> <span>今</span> <span>天 ...

  8. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  9. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

随机推荐

  1. LeetCode周赛#203 题解

    1561. 你可以获得的最大硬币数目 #贪心 题目链接 题意 有 3n 堆数目不一的硬币,你和你的朋友们打算按以下方式分硬币: 每一轮中,你将会选出 任意 3 堆硬币(不一定连续). Alice 将会 ...

  2. Beta冲刺随笔——Day_One

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 Beta 冲刺 这个作业的目标 团队进行Beta冲刺 作业正文 正文 其他参考文献 无 今日事今日毕 林涛: ...

  3. IdentityServer4系列 | 常见术语说明

    一.前言 在上一篇中,我们IdentityServer4的说明,认识到是一个基于OpenID Connect协议标准的身份认证和授权程序,并简单的对基础知识的认识以及区别说明,从OAuth.OpenI ...

  4. 20190712_mysql执行sql脚本语句_Failed to open file_error

    要说执行sql脚本语句不难 就下面这条语句: 进入mysql安装目录下的bin目录 然后执行: \mysql –u用户名 –p密码 –D数据库<[sql脚本文件路径全名] 比如: C:\MySQ ...

  5. 课堂笔记【java JDBC】

    目录 JDBC简介 工作原理: 工作过程: JDBC驱动与连接 JDBC驱动 连接JDBC驱动 1.下载特定数据库的JDBCjar包 2.加载并注册数据库驱动 3.连接驱动 JDBC常见API JDB ...

  6. DockerFile理解与应用

    1.DockerFile是什么? DockerFile是用来构建Docker镜像的构建文件,一般分为四部分:基础镜像信息.维护者信息.镜像操作指令和容器启动时执行指令,'#' 为 Dockerfile ...

  7. PyQt（Python+Qt）学习随笔：containers容器类部件QStackedWidget重要方法介绍

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 StackedWidget堆叠窗口部件为一系列窗口部件的堆叠,对应类为QStackedWidget. ...

  8. swpuCTF2019 web1 无列名注入

    上周参加的swpuctf比赛第一道web题做了好久,在最后一个小时用非预期的方法做出来了,看了官方题解之后记录一下wp里面的无列名注入. 关于无列名注入可以看一下这篇链接 https://www.ch ...

  9. python调用jar包

    工作项目中用jmeter做接口测试,想尝试用python写接口测试(练习下python), 接口中好多字段都需要加密,而加密方法是java开发写的,打的jar包,这就需要考虑python调用java: ...

  10. 《深入理解计算机系统》实验一 —Data Lab

    本文是CSAPP第二章的配套实验,通过使用有限的运算符来实现正数,负数,浮点数的位级表示.通过完成这13个函数,可以使我们更好的理解计算机中数据的编码方式. 准备工作   首先去官网Lab Assig ...