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

最新推荐文章于 2023-02-05 21:47:46 发布

Mnzn

最新推荐文章于 2023-02-05 21:47:46 发布

阅读量390

点赞数 1

文章标签： html css flex checkbox

本文链接：https://blog.csdn.net/Summer_yy1/article/details/108905692

版权

本文通过CSS实现了一个模拟iPhone飞行模式的按钮。使用label和checkbox创建结构，利用伪类选择器、flex布局和过渡效果，解决了点击触发及背景色变化的问题。还分享了隐藏元素的小技巧和视口单位的知识。

摘要由CSDN通过智能技术生成

在这里插入图片描述

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

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

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

关注