Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >我是怎样制作这个逼真的红色开关的（纯CSS）

我是怎样制作这个逼真的红色开关的（纯CSS）

作者头像

海拥

发布于 2021-08-23 09:37:36

发布于 2021-08-23 09:37:36

41200

代码可运行

举报

文章被收录于专栏：全栈技术全栈技术

运行总次数：0

代码可运行

在制作过程中，我使用了各种不同的CSS技术，包括渐变，3D转换，动画和过渡。在本教程中，我将深入探讨其中的一些技术。

演示地址：http://haiyongcsdn.gitee.io/realistic-red-switch/

模拟状态

开关具有2个状态-开启和关闭，但是CSS无法保持这种状态。

为了解决这个问题，我们可以使用原生HTML元素之一。由于我们只需要维护2个状态，因此checkbox元素是一个不错的选择。我们可以使用:checkedCSS选择器根据复选框是否选中来应用CSS。

我们将整个内容包装在<label/>中，以将整个元素的click事件链接到复选框，然后使用CSS隐藏复选框本身。

<label class="switch

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/03/24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

纯CSS实现iOS风格打开关闭选择框

编程算法 css html

在html中，<label>标签通常和<input>标签一起使用，<label>标签为input元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果，<label>标签的作用是为鼠标用户改进了可用性，当用户点击<label>标签中的内容时，浏览器就会自动将焦点转到和该标签相关联的控件上；<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击label标签内的内容，也可以选中对应的单选按钮或复选按钮。

AlbertYang

2020/09/08

1.1K0

纯CSS实现iOS风格打开关闭选择框

使用HTML和CSS编写无JavaScript的Todo应用

本文介绍了一个使用HTML、CSS和JavaScript实现的无JavaScript的Todo应用。通过使用CSS的伪类选择器，可以实现添加、删除、编辑和标记任务的功能。同时，通过存储和访问数据，可以在不依赖JavaScript的情况下进行实时更新。

IMWeb前端团队

2017/12/29

3.8K0

使用HTML和CSS编写无JavaScript的Todo应用

使用 CSS Checkbox Hack 技术制作一个手风琴组件

css html 编程算法

在本篇文章里，我们一起学习下如何使用 CSS checkbox hack 技巧制作一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，基于窗口大小进行水平和垂直之间进行切换。为了让大家更好理解，我将和大家一起一步步的进行完成。

前端达人

2019/12/23

5.5K0

使用 CSS Checkbox Hack 技术制作一个手风琴组件

CSS(CSS3)选择器（2）

该部分主要为CSS3新增的选择器接上一篇 CSS（CSS3）选择器（1）一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。 div ~ p{ background-color:#00FF00; } 二.属性选择器: 25：E[att ^= val]，匹配属性att的值以”val“开头的元素。 [id ^= start]{ background-color:red; ]

zaking

2018/05/02

1K0

css3实战汇总（附源码）

css html 编程算法网站 vue.js

利用css3的新特性可以帮助我们实现各种意想不到的特效，接下来的几个案例我们来使用css3的box-shdow来实现，马上开始吧！

徐小夕

2019/09/25

7660

CSS设置复选框和开关的样式

border 工作浏览器系统 css

我可能不是唯一一个对浏览器的默认设置感到沮丧的开发人员<input type="checkbox">。

哈德森sir

2024/05/16

7030

分享15个高级前端开发小技巧

javascript 布局动画技巧脚本

我们将提供真实世界的示例，并将它们与旧的基于 JavaScript 的方法进行比较，展示现代 Web 技术的力量。

前端达人

2024/03/25

4240

Imooc之Html与CSS

html css 编程算法 c++

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

ZHaos

2019/02/27

6.9K0

【Java 进阶篇】JQuery 案例：全选全不选，为选择添彩

java jquery 表格事件原理

在前端的舞台上，用户交互是一场精彩的表演，而全选全不选的功能则是其中一段引人入胜的剧情。通过巧妙运用 JQuery，我们可以为用户提供便捷的全选和全不选操作，让页面更富交互性。本篇博客将深入探讨 JQuery 中全选全不选的实现原理和实际应用，为你揭开这段前端小剧场的神秘面纱。

繁依Fanyi

2023/11/15

4360

【Java 进阶篇】JQuery 案例：全选全不选，为选择添彩

如何使用纯 CSS 制作四子连珠游戏

实验是学习新技巧、思考新想法、并突破自身极限的有趣的方式。“纯 CSS”演示很早就有了，但是随着浏览器和CSS的发展，新的挑战又出现了。CSS 和 HTML 预处理器也促进了纯 CSS 演示的发展。有时候，预处理程序用于硬编码每个可能的场景，比如 :checked 的长字符串和相邻兄弟选择器。

叙帝利

2018/09/28

2K0

如何使用纯 CSS 制作四子连珠游戏

iOS开关按钮，纯CSS给你安排上了

今早搭完电梯出来信号不太好，切换飞行模式重启信号，发现iOS的「开关按钮」挺好玩的，顺便用纯CSS实现一番。

JowayYoung

2020/09/18

1.8K0

学习jQuery？这篇文章就够了

jquery 网站 html javascript

jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。 jQuery 的语法设计可以使开发者更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 AJAX 以及其他功能。

上分如喝水

2021/08/16

12.4K0

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

在本篇文章里，我们将一起学习下如何使用 CSS checkbox hack 技术纯手工撸一个响应式的手风琴组件，这个组件完全基于CSS，没有JavaScript脚本，同时又基于窗口大小进行水平和垂直之间进行样式切换。为了让大家更好理解本案例，我将和大家一起一步步的完成。

前端达人

2019/12/25

3.3K0

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

CSS3新特性应用之用户体验

一、光标新增加not-allowed光标，不允许访问隐藏光标，在触模应用上很有用，css2.1需要一个透明的图片来实现，而css3直接用cursor:none即可。完整代码： curosr: url(transparent.gif'); cursor: none; 二、扩大热区应用在小按钮的情况下，不好被鼠标点击到代码如下： .btn{ position: relative; cursor: pointer; } .btn:after{ position: absolute

sam dragon

2018/01/17

8550

从0开始编写一个开关组件

编程算法 windows 数据分析 css

开关按钮似乎是开发人员和设计师最喜欢的展示他们的动画、设计和双关语技能的方式。甚至还有一个专门用于开关按钮的Codepen集合。

coder_koala

2020/08/27

2.5K0

【QT】QT界面的美容院 -- QSS

开发事件 qt 程序继承

🔥 在网页前端开发领域中，CSS 是一个至关重要的部分，描述了一个网页的 “样式”，从而起到对网页美化的作用。

IsLand1314

2025/04/15

2570

【QT】QT界面的美容院 -- QSS

纯CSS改写radio和checkbox，单选框、复选框样式优化

CSS：将单选框或者复选框隐藏，在其后面写一个 span 利用 CSS 的相邻兄弟选择器 input + span 选中它，对它的样式进行美化。

德顺

2019/11/13

5.5K0

纯CSS改写radio和checkbox，单选框、复选框样式优化

动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件

大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性实践太少了，不能进行灵活应用，CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径，和JS编程一样，要重视对待，要多看和多练，因为现在的CSS不再是以前的CSS啦。

前端达人

2020/02/18

1.1K0

动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件

前端之form表单与css（1）

form表单用于用户界面向服务器传输数据，实现用户和web服务器的交互。表单包含input系列标签如文本字段、复选框、单选框、提交按钮等。

GH

2019/12/16

2K0

前端之form表单与css（1）

Vue表单输入绑定

表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。

别团等shy哥发育

2023/02/25

7.6K0

相关推荐

纯CSS实现iOS风格打开关闭选择框

更多 >

LV.4

这个人很懒，什么都没有留下～

作者相关精选

换一批

目录

模拟状态

加入讨论

的问答专区 >

相关课程

一站式学习中心 >

Python教程-Django框架快速入门到实战

数字化IT从业者知识体系