当前位置: 首页 > news >正文

纯css手写switch

CSS 手写switch

  • 纯css手写switch
  • css变量

纯css手写switch

思路:

  1. switch需要的元素有:开关背景开关按钮。点击按钮后,背景色变化,按钮颜色变化,呈现开关打开状态。

  2. 利用type=checkbox,来实现switch效果(修改样式)。

细节:

  1. 开关背景可以在里面添加个<span>的作为被修改的背景。
  2. 开关按钮可以用伪元素来实现。
  3. 点击后颜色变化,可以根据checkbox特性,使用伪类选择器来添加改变背景色的样式,且通过伪类选择器,让伪元素移动位置。

前置知识一:

  1. 伪类选择器:
    概念:为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。

    比如鼠标悬停hover效果,或者获取焦点focus效果。
    使用:用冒号表示


  2. 伪元素:
    概念:创建一些不在Dom树中的元素,并为其添加样式。
    使用:用双冒号表示。

前置知识二:正常来说,我们dispaly:none的时候,我们就不会触发隐藏元素的点击事件了。

对于type=checkbox,当我们在外层加一个<label>标签,就可以在隐藏input的时候,点击label触发选中事件,我们经常用这种方式来定义一些样式。

<!-- css实现switch开关 --><!-- 加一个label标签,当我们点击label标签的时候复选框会被选中 -->
<label class="switch"><input type="checkbox"><span class="slider"></span>
</label><style>:root{--switchWidth:90px;--switchHeight:40px;}/*前置操作:1. 外层定义switch的大小。2. 隐藏checkbox框。*//* 定义开关的大小 */.switch {position: relative;display: inline-block;width: var(--switchWidth);height: var(--switchHeight);}/* 隐藏原本的复选框 */.switch input {display: none;}/*第一步:1.定义switch的背景:让span标签,填充满父元素,用作switch的背景。2.定义switch的开关按钮:使用伪元素,给switch添加按钮。position:absolute会找离着自己最近的relative定位。*//* 开关背景 */.slider {position: absolute;  /* 子绝父相定位 */cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #eee;transition: .5s;    /* 过渡,所有的都0.5S */border-radius: 100px;}/* 开关按钮 */.slider::before {content: "";height: 30px;width: 30px;border-radius: 20px;position: absolute;left: 8px;bottom: 5px;background-color: #aeaaae;transition: .4s;}/*第二步:1.选中的时候更改起兄弟元素样式。也就是修改选中的背景色。2.选中的时候,开关按钮向左移动一段距离且改变颜色。*/input:checked + .slider{background: green;}	/* 使用伪类与伪元素。当input选中的时候,已经添加的伪类,颜色变白,且移动44px */input:checked + .slider::before{background-color: #fff;transform: translateX(44px);}
</style>

css变量

<style>:root{--size:200px;}	.box{height:var(--size);width:var(--size);background:red;}.box .item{height:calc(var(--size)/2);width:calc(var(--size)/2);background:green;}
</style>
<div class="box"><!-- css变量 --><!-- 使用方式:1.通过 " -- " 来定义一个css变量2.使用的时候,通过var方式引用。3.css变量同样可以用于计算。--><!--使用场景:css变量使用非常广泛,比如我们定义一个组件,如果不用变量的话,如果要改小宽度或者高度,是很麻烦的,会有连带效果。用变量以后会方便多。其次,可以方便于复用。--><div class="item"></div>
</div>

相关文章:

纯css手写switch

CSS 手写switch 纯css手写switchcss变量 纯css手写switch 思路&#xff1a; switch需要的元素有&#xff1a;开关背景、开关按钮。点击按钮后&#xff0c;背景色变化&#xff0c;按钮颜色变化&#xff0c;呈现开关打开状态。 利用typecheckbox&#xff0c;来实现switch效果(修…...

PyTorch 深度学习之处理多维特征的输入Multiple Dimension Input(六)

1.Multiple Dimension Logistic Regression Model 1.1 Mini-Batch (N samples) 8D->1D 8D->2D 8D->6D 1.2 Neural Network 学习能力太好也不行&#xff08;学习到的是数据集中的噪声&#xff09;&#xff0c;最好的是要泛化能力&#xff0c;超参数尝试 Example, Arti…...

LeetCode【438】找到字符串中所有字母异位词

题目&#xff1a; 注意&#xff1a;下面代码勉强通过&#xff0c;每次都对窗口内字符排序。然后比较字符串。 代码&#xff1a; public List<Integer> findAnagrams(String s, String p) {int start 0, end p.length() - 1;List<Integer> result new ArrayL…...

关于LEFT JOIN的一次理解

先看一段例子&#xff1a; SELECTproduct_half_spu.id AS halfSpuId,product_half_spu.half_spu_code,product_half_spu.half_spu_name,COUNT( product_sku.id ) AS skuCount,product_half_spu.create_on,product_half_spu.create_by,product_half_spu.upload_pic_date,produc…...

各报文段格式集合

数据链路层-- MAC帧 前导码8B&#xff1a;数据链路层将封装好的MAC帧交付给物理层进行发送&#xff0c;物理层在发送MAC帧前&#xff0c;还要在前面添加8字节的前导码&#xff08;分为7字节的前同步码1字节的帧开始定界符&#xff09;MAC地址长度6B数据长度46&#xff5e;1500B…...

【算法-动态规划】最长公共子序列

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

区块链游戏的开发流程

链游&#xff08;Blockchain Games&#xff09;的开发流程与传统游戏开发有许多相似之处&#xff0c;但它涉及到区块链技术的集成和智能合约的开发。以下是链游的一般开发流程&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&…...

目标检测网络系列——YOLO V2

文章目录 YOLO9000better,更准batch Normalization高分辨率的训练使用anchor锚框尺寸的选择——聚类锚框集成改进——直接预测bounding box细粒度的特征图——passthrough layer多尺度训练数据集比对实验VOC 2007VOC 2012COCOFaster,更快网络模型——Darknet19训练方法Strong…...

15. Java反射和注解

Java —— 反射和注解 1. 反射2. 注解 1. 反射 动态语言&#xff1a;变量的类型和属性可以在运行时动态确定&#xff0c;而不需要在编译时指定 常见动态语言&#xff1a;Python&#xff0c;JavaScript&#xff0c;Ruby&#xff0c;PHP&#xff0c;Perl&#xff1b;常见静态语言…...

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件&#xff0c;旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能&#xff1a; PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题&#xff0c;如缺失字体、图像分辨率低、颜色空…...

微信小程序入门开发教程

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…...

php函数

1. strstr() 返回a在b中的第一个位置 2.substr() 截取字符串 3.PHP字符串函数parse_str(将字符串解析成多个变量)-CSDN博客 4.explode() 字符串分割为数组 5.trim&#xff08;&#xff09; 1.去除字符串两边的 空白字符 2.去除指定字符 6.extract()函数从数组里…...

3.3 封装性

思维导图&#xff1a; 3.3.1 为什么要封装 ### 3.3.1 为什么要封装 **封装**&#xff0c;在Java的面向对象编程中&#xff0c;是一个核心的思想。它主要是为了保护对象的状态不被外部随意修改&#xff0c;确保数据的完整性和安全性。 #### **核心思想&#xff1a;** - 保护…...

Redis魔法:点燃分布式锁的奇妙实现

分布式锁是一种用于在分布式系统中控制对共享资源的访问的锁。它与传统的单机锁不同&#xff0c;因为它需要在多个节点之间协调以确保互斥访问。 本文将介绍什么是分布式锁&#xff0c;以及使用Redis实现分布式锁的几种方案。 一、前言 了解分布式锁之前&#xff0c;需要先了…...

iOS 项目避坑:多个分类中方法重复实现检测

#前言 在项目中,我们经常会使用分类 -> category。category在实际项目中一般有两个左右:1.给已有class增加方法,扩充起能力、2.将代码打散到多个文件中,避免因为一个类过于复杂而导致代码篇幅过长(应用于viewController中很好用) 但是 category 也有很多弊端~ **首…...

【003】EIS数据分析_#LIB

EIS数据分析 1. EIS测试及数据获取2. EIS数据分析2.1 EIS曲线划分 1. EIS测试及数据获取 点击查看往期介绍 2. EIS数据分析 2.1 EIS曲线划分 一般来说&#xff0c;实轴处的截获表示体电阻(Rb)&#xff0c;它反映了电解质&#xff0c;隔膜和电极的电导率。高频区的半圆对应于…...

Sprint framework Day07:注解结合 xml 配置

前言 Spring注解结合XML配置是指在Spring应用中&#xff0c;使用注解和XML配置的方式来进行Bean的定义、依赖注入和其他配置。这种方式可以充分利用Spring框架的注解和XML配置两种不同的配置方式的特点。 在Spring框架中&#xff0c;我们可以使用注解来定义Bean&#xff0c;如…...

LiveGBS流媒体平台GB/T28181功能-国标流媒体服务同时兼容内网收流外网收流多网段设备收流

LiveGBS流媒体平台GB/T28181功能-国标流媒体服务同时兼容内网收流外网收流多网段设备收流 1、背景2、设备接入播放2.1、查看通道2.2、直播播放 3、默认收流地址配置4、其它网络设备收流配置5、搭建GB28181视频直播平台 1、背景 服务器部署的时候&#xff0c;可能有多个网卡多个…...

js题解(四)

文章目录 批量改变对象的属性判断是否包含数字判断是否符合指定格式 批量改变对象的属性 给定一个构造函数 constructor&#xff0c;请完成 alterObjects 方法&#xff0c;将 constructor 的所有实例的 greeting 属性指向给定的 greeting 变量。 function alterObjects(const…...

如何进行大数运算和高精度计算?

大数运算和高精度计算是在计算机编程中常见的需求&#xff0c;尤其是当处理大整数、分数、复数、浮点数等需要更多位数的数据时。在C语言中&#xff0c;由于原生的数据类型有限&#xff0c;您需要使用自定义的数据结构和算法来执行大数运算和高精度计算。在本文中&#xff0c;我…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...