纯css实现iphone按钮（例飞行模式）

1.本来的思路：

我使用两个div分别实现圆角矩形和圆形，并将其嵌套在一起，使圆形在圆角矩形内部。然后布局使用margin:0 auto;

2.出现的问题：

当使用伪类选择器hover或者active不能达到点击触发的效果，而且只能在点击圆形时触发。而且只能实现圆形移动的效果，不能实现移动后背景色变色。

3.改进：

使用label实现圆角矩形，checkbox实现圆形。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>iphone按钮</title></head><body><label><input type="checkbox"/></label></body>
</html>

label{width: 100px;height: 50px;border-radius: 25px;background-color: gainsboro;position: relative;overflow: hidden;/*去除在before里面溢出的部分*/}
label input::after{content: "";visibility: visible;width: 40px;height: 40px;border-radius: 100%;background-color: white;position: absolute;left: 5px;top: 5px;transition: all 0.2s;}

优点:
label:点击label,多选框的状态也会改变
checkbox：有checked伪类选择器，实现点击就触发。
2. 使用 ::before,::after伪元素。

label input{visibility: hidden;/*隐藏多选框*/}
label input::before{content: "";visibility: visible;width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: all 0.2s;}label input:checked::before{background-color: green;//改变背景色}label input:checked::after{transform: translateX(50px);}

优点：
可以实现点击圆形复选框后，背景色改变。
3.使用flex弹性布局设置垂直水平居中。

body{/* flex使其水平垂直居中的方法：必须在父容器设置，且必须是100vh*/height: 100vh;display:flex;justify-content: center;align-items: center;}

优点：可以实现垂直居中。
4.添加过渡效果
5.对于溢出部分直接在父类中overflow: hidden;

4.小技巧

在全局中设置

*{margin: 0;padding: 0;}

选择使用visibility:hidden来隐藏;故子类可设置visible使其显示出来。但opacity和display就达不到效果；
子类设置了absolute绝对定位后，父类也要设置relative相对定位；
使用border-radius可以实现圆角。

5.额外知识

.vh：1vh等于视口高度的1%。
什么是视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。视口单位中的“视口”，桌面端指的是浏览器的可视区域。

纯css实现iphone按钮（例飞行模式）相关推荐

纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
纯CSS实现3D按钮效果
今天分享一个用纯CSS实现的3D按钮. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值. 让人感觉有一种按钮被按下的感觉.css代码 ...
自学篇之--js 提取复选框和单选框的值和纯css的3D按钮
2019独角兽企业重金招聘Python工程师标准>>> <html> <head> <meta charset="utf-8" co ...
如何用纯 CSS 创作从按钮两侧滑入装饰元素的悬停特效
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yRyOZr 可交互视频 ...
纯css书签导航按钮
最近在写个网站,发现导航栏怎么写都不好看.后来在看别人的网站的时候发现了一个不错的设计,于是乎就想自己去试试如何写出同样的效果.先贴别人网站导航的效果图. 类似书签式的立体导航,瞬间就觉得这个设计真的 ...
使用纯css做的按钮
http://www.zhangxinxu.com/study/200910/css-width-height-auto-btn.html#nog http://hi.baidu.com/louve0 ...
纯CSS实现beautiful的3D动画
大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图("百题斩"获取<前端百题斩>pdf版:分别回复"g ...
dell inspiron 只有一个飞行模式没有wifi_开飞行模式能帮手机充电加快？
很多人用手机都知道飞行模式,关于飞行模式还有更多谣言,特别是说手机开了飞行模式后,充电速度就快一倍?这么神奇的吗?让我们实测看看-- 很多人对手机充电都有误解,比如这种骗人的视频都可以10多万赞,我们 ...