原创投稿
  1. 创想鸟首页
  2. 用户投稿

纯CSS实现带动态SVG图标的切换开关教程

程序猿 • • 用户投稿

纯css实现带动态svg图标的切换开关教程

本教程详细讲解如何利用纯CSS构建一个带有动态SVG图标的切换开关。通过隐藏的HTML复选框作为状态控制器，并巧妙结合CSS相邻兄弟选择器 (`+`) 和通用兄弟选择器 (`~`)，配合 `visibility` 属性，实现点击切换时，不同SVG图标（如日/月）的无缝显示与隐藏，从而创建交互式UI元素，无需任何JavaScript。

在现代网页设计中，交互式切换开关（Toggle Switch）是常见的UI元素，常用于控制主题模式（如亮/暗模式）、设置选项等。本教程将引导您使用纯CSS和HTML构建一个功能完善、外观精美的切换开关，其特点是能够根据开关状态动态显示不同的SVG图标，例如“太阳”和“月亮”图标，而无需编写任何JavaScript代码。

HTML结构概览

首先，我们需要一个清晰的HTML结构来承载我们的切换开关。核心思想是使用一个隐藏的复选框（input[type=”checkbox”]）作为状态控制器，并通过其状态来驱动CSS样式的变化。

: 这是整个切换开关的外部容器，它与 input 元素通过 for 和 id 属性关联，使得点击 label 区域即可切换复选框的状态，增强了用户体验和可访问性。: 核心的复选框。display: none; 将使其在视觉上隐藏，但其状态（checked 或非 checked）仍可通过CSS选择器访问。

: 这是开关的“轨道”部分，包含一个通过 ::before 伪元素创建的“滑块”，以及“太阳”和“月亮”图标。

和

: 这两个 div 元素分别包裹了对应的SVG图标。它们的 visibility 属性将根据复选框的状态进行切换。

SCSS/CSS实现详解

我们将使用SCSS来编写样式，它提供了变量、混入（mixin）等功能，使CSS更易于维护和扩展。

立即学习“前端免费学习笔记（深入）”；

$width: 80px;$height: 44px;$border-radius: 50px;$circle-size: $height - 4px; // 滑块大小$icon-size: $circle-size - 2px; // 图标大小$neutral: red; // 默认背景色$secondary: white; // 悬停边框色$base-100: white; // 默认边框色$base-200: gray;$base-300: black; // 滑块背景色$base-content: white; // 图标填充色// 混入：用于定义图标的通用样式@mixin icon {  position: absolute; // 改为absolute，方便定位  display: block;  width: $icon-size;  height: $icon-size;  border-radius: 50%;  overflow: hidden;  fill: $base-content; // SVG图标的填充色  transition: visibility 0.25s, opacity 0.25s; // 添加过渡效果}.ThemeToggler {  width: $width;  height: $height;  flex-shrink: 0;  border-radius: $border-radius;  background-color: $neutral;  border: 1px solid $base-100;  display: inline-block;  cursor: pointer;  overflow: hidden; // 确保图标不会溢出  position: relative; // 为内部的绝对定位元素提供参考  &:hover {    border-color: $secondary;  }}.ThemeTogglerFill {  position: relative;  width: 100%;  height: 100%;  &:before {    content: "";    position: absolute;    top: 1px;    left: 1px;    height: $circle-size;    width: $circle-size;    background: $base-300;    box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);    border-radius: $border-radius;    transition: background-color 0.25s, transform 0.25s;  }}.ThemeTogglerInput {  display: none; // 隐藏原生复选框  // 当复选框被选中时，移动滑块  &:checked ~ .ThemeTogglerFill::before {    transform: translateX($circle-size);  }  // 默认状态（复选框未选中）下的图标显示/隐藏  // `+` 选择器表示紧邻的兄弟元素  & + .ThemeTogglerFill {    .MoonIcon {      visibility: hidden;      opacity: 0;    }    .SunIcon {      visibility: visible;      opacity: 1;    }  }  // 当复选框被选中时，切换图标的显示/隐藏  &:checked + .ThemeTogglerFill {    .SunIcon {      visibility: hidden;      opacity: 0;    }    .MoonIcon {      visibility: visible;      opacity: 1;    }  }}.SunIcon {  @include icon;  top: 50%; // 垂直居中  left: 1.7px;  transform: translateY(-50%); // 垂直居中调整}.MoonIcon {  @include icon;  top: 50%; // 垂直居中  left: $circle-size + 2px; // 定位到右侧  transform: translateY(-50%); // 垂直居中调整}

样式解析：

变量定义:使用SCSS变量定义了开关的尺寸、颜色等，便于统一管理和修改。.ThemeToggler:定义了整个开关的宽度、高度、圆角和背景色。position: relative; 是为了让内部的绝对定位元素（如图标）能够相对于它进行定位。overflow: hidden; 确保了图标在切换时不会溢出边界。.ThemeTogglerFill:这是开关的“轨道”部分。其 ::before 伪元素创建了可左右移动的“滑块”。transition 属性为滑块的移动和背景色变化添加了平滑的动画效果。.ThemeTogglerInput (核心逻辑):display: none;: 隐藏了原生的复选框，使其不占据页面空间。&:checked ~ .ThemeTogglerFill::before: 当复选框被选中时，通过通用兄弟选择器（~）找到 ThemeTogglerFill 元素，并作用于其 ::before 伪元素，将其 transform 属性设置为 translateX($circle-size)，使滑块向右移动。图标切换逻辑：& + .ThemeTogglerFill: 这是关键所在。+ 是相邻兄弟选择器，它选择紧跟在 ThemeTogglerInput 后面的 ThemeTogglerFill 元素。此规则定义了复选框未选中时的图标状态：MoonIcon 被隐藏 (visibility: hidden; opacity: 0;)，而 SunIcon 可见 (visibility: visible; opacity: 1;)。&:checked + .ThemeTogglerFill: 当复选框被选中时，此规则生效，它将 SunIcon 隐藏，并使 MoonIcon 可见。这里使用 visibility 属性而非 display，是因为 visibility: hidden 元素仍占据其原始空间，这对于保持布局稳定很重要。同时，结合 opacity 可以实现更平滑的淡入淡出过渡效果。@mixin icon 及 .SunIcon, .MoonIcon:@mixin icon 定义了图标容器的通用样式，如 position: absolute 用于精确定位，width, height, border-radius 等。fill: $base-content; 设置了SVG图标的默认填充色。.SunIcon 和 .MoonIcon 分别应用了 icon 混入，并根据需要调整了 top 和 left 属性，以确保图标在开关的不同位置正确显示。transform: translateY(-50%); 用于实现垂直居中。

完整代码示例

将上述HTML和SCSS代码结合，即可实现一个功能完整的纯CSS动态图标切换开关。

HTML:

以上就是纯CSS实现带动态SVG图标的切换开关教程的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1583944.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
JavaScript焦点陷阱：解决Tab键循环立即返回首个元素的常见问题
上一篇 2025年12月23日 00:27:07
在用户界面中实现多对多关系管理：以用户与场地为例
下一篇 2025年12月23日 00:27:21

相关推荐

  • Java多线程并发控制：告别线程优先级，拥抱锁机制 用户投稿

    Java多线程并发控制：告别线程优先级，拥抱锁机制

    本文深入探讨了在Java多线程环境中如何有效解决并发操作中断问题，特别是当多个线程尝试同时执行非原子性操作（如打印）时。文章指出，单纯依赖线程优先级并不可靠，并详细介绍了使用synchronized关键字配合共享锁对象实现互斥访问的关键技术，确保关键代码块的原子性执行，从而避免数据混乱和逻辑错误。 …

    程序猿的头像 程序猿
    2026年9月22日
    700
  • 设计VSCode三维图形编程界面与WebGL实时预览模块 用户投稿

    设计VSCode三维图形编程界面与WebGL实时预览模块

    VSCode通过集成WebGL预览插件实现三维图形编程的实时反馈，利用扩展架构提供GLSL语法支持、文件关联及命令注册，并通过Webview嵌入渲染窗口，结合消息通信与动态编译技术实现实时预览，配合保存自动刷新、错误定位与多视图布局优化交互体验，构建高效闭环开发环境。 在使用 VSCode 进行三维…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • Apache Pulsar 主题分区创建与管理指南 用户投稿

    Apache Pulsar 主题分区创建与管理指南

    本文深入探讨Apache Pulsar主题分区的创建与管理。Pulsar主题分区是实现高吞吐量和可伸缩性的关键，但必须在主题创建时进行配置。文章详细介绍了两种主要的分区主题创建方法：通过Broker配置实现自动分区，以及利用Pulsar Admin API进行显式创建，并强调了分区主题一旦创建后不可…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • PHP如何锐化图片效果_PHP对图片进行锐化处理 用户投稿

    PHP如何锐化图片效果_PHP对图片进行锐化处理

    PHP通过GD库或Imagick扩展实现图片锐化，核心是利用卷积算法增强边缘对比度；GD库使用imageconvolution()函数配合锐化矩阵处理，适合基础需求，而Imagick支持更精细的非锐化蒙版等高级算法，效果更优但需额外安装；锐化能提升视觉质量和用户体验，间接有利于SEO，但需避免过度锐…

    程序猿的头像 程序猿
    2026年9月22日
    300
  • 使用 Spring Boot Test @Sql 注解通过掩码描述文件的方法 用户投稿

    使用 Spring Boot Test @Sql 注解通过掩码描述文件的方法

    在 Spring Boot 测试中，我们经常使用 @Sql 注解来执行 SQL 脚本，以便在测试前准备数据或在测试后清理数据。 通常的用法如下： @Sql(scripts = “/folder/my_favourite_script.sql”)@Testpublic void myTest() { …

    程序猿的头像 程序猿
    2026年9月22日
    100

  • 使用Sublime管理MySQL数据库结构_高效编辑表结构与字段定义脚本

    使用Sublime管理MySQL数据库结构_高效编辑表结构与字段定义脚本使用Sublime管理MySQL数据库结构_高效编辑表结构与字段定义脚本使用Sublime管理MySQL数据库结构_高效编辑表结构与字段定义脚本使用Sublime管理MySQL数据库结构_高效编辑表结构与字段定义脚本

    用 sublime text 管理 mysql 数据库结构脚本高效且灵活。1. 适合习惯文本编辑、需自定义流程的开发者；2. 启动快、资源占用低，支持多光标、正则替换，插件丰富，易配合 git；3. 建议每张表单独文件、按模块分目录、主脚本汇总建表语句，索引外键单独文件；4. 推荐插件有 sqlto…

    程序猿的头像 程序猿
    2026年9月22日 • 用户投稿
    000
  • Spring Boot集成MongoDB Atlas：正确配置与故障排除 用户投稿

    Spring Boot集成MongoDB Atlas：正确配置与故障排除

    本教程详细指导如何在Spring Boot应用中正确配置与连接MongoDB Atlas集群。我们将重点讲解如何获取并使用正确的Atlas连接URI，安全地处理用户认证信息，以及准确指定目标数据库。通过实例代码和常见错误排查，帮助开发者避免连接失败，确保应用与MongoDB Atlas的顺畅集成。 …

    程序猿的头像 程序猿
    2026年9月22日
    600
  • Prestashop分页隐藏分类描述的SEO考量与处理 用户投稿

    Prestashop分页隐藏分类描述的SEO考量与处理

    本文探讨了Prestashop商店中分类描述在分页后消失的问题。我们解释了这种现象通常并非SEO问题，因为搜索引擎主要关注第一页的描述内容。教程将深入分析此行为背后的SEO逻辑，并提供确保网站SEO友好的最佳实践，强调第一页描述的重要性及规范使用Canonical标签。 Prestashop分类描述…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • 如何利用 JavaScript 实现一个支持拖放排序的交互界面？ 用户投稿

    如何利用 JavaScript 实现一个支持拖放排序的交互界面？

    答案是利用HTML5拖放API实现拖拽排序，通过设置draggable属性和监听dragstart、dragover、drop事件控制元素移动，结合CSS提升交互反馈。 要实现一个支持拖放排序的交互界面，核心是利用 HTML5 的拖放 API（Drag and Drop API）结合 JavaScr…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • Apache POI生成带水印DOCX文件时的XML内容错误解析与应对 用户投稿

    Apache POI生成带水印DOCX文件时的XML内容错误解析与应对

    本文深入探讨了使用Apache POI生成带有水印的DOCX文件时，可能遇到的“XML声明只能出现在输入开头”错误。该错误通常指向DOCX内部XML文件（如header4.xml）的格式问题，导致文件在Microsoft Word中无法打开。文章分析了错误原因，并提供了包括升级POI版本、手动检查D…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • Java并发编程中Runnable接口使用方法 用户投稿

    Java并发编程中Runnable接口使用方法

    Runnable接口用于定义线程任务，通过实现run()方法封装执行逻辑，不返回结果且不能抛出受检异常；可直接传给Thread实例启动线程，也可用Lambda表达式简化代码；推荐结合ExecutorService线程池使用，提升资源利用率；需注意无返回值、异常处理在内部完成、共享变量线程安全等问题。…

    程序猿的头像 程序猿
    2026年9月22日
    200
  • PHP 表单验证：确保 HTML select 下拉菜单已正确选择非默认选项 用户投稿

    PHP 表单验证：确保 HTML select 下拉菜单已正确选择非默认选项

    本文将详细介绍如何在 PHP 后端对 HTML select 下拉菜单进行有效验证，确保用户选择了非默认选项。我们将探讨常见的验证误区，并提供一个简洁高效的解决方案，通过检查 $_POST 数据来判断用户是否已做出有效选择，从而避免表单提交无效数据，提升用户体验和数据准确性。 在构建 web 表单时…

    程序猿的头像 程序猿
    2026年9月22日
    200
  • 360浏览器怎么禁止网页自动刷新_360浏览器阻止页面定时刷新设置方法 用户投稿

    360浏览器怎么禁止网页自动刷新_360浏览器阻止页面定时刷新设置方法

    1、通过360浏览器开发者工具删除含http-equiv=”refresh”的meta标签可临时阻止刷新；2、启用弹窗拦截功能可屏蔽由脚本触发的自动刷新；3、使用无痕模式浏览可限制脚本运行，避免页面刷新；4、安装“Tampermonkey”等扩展并添加屏蔽规则可实现长期有效阻…

    程序猿的头像 程序猿
    2026年9月22日
    400
  • 在Java中如何通过Stream实现交集与差集 用户投稿

    在Java中如何通过Stream实现交集与差集

    交集可通过filter结合contains获取两集合共有元素，差集则保留一个集合中不在另一集合的元素，示例使用list1.stream().filter(list2::contains)得[3,4]，filter(e->!list2.contains(e))得[1,2]，建议将list2转为H…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • Java Swing中按钮与文本框事件处理的实践指南 用户投稿

    Java Swing中按钮与文本框事件处理的实践指南

    本文将深入探讨Java Swing中ActionListener的正确使用方法，指导开发者如何为GUI按钮和文本框实现事件监听，从而处理用户输入、执行计算并实时更新界面。文章将重点讲解如何在actionPerformed方法中获取用户输入、进行类型转换、处理潜在异常，并提供一个完整的计算器示例来演示…

    程序猿的头像 程序猿
    2026年9月22日
    200
  • VSCode搭建前端开发环境(新手必备，插件配置详解) 用户投稿

    VSCode搭建前端开发环境(新手必备，插件配置详解)

    vscode是前端开发的理想选择，因其轻量、可扩展且拥有活跃的社区支持，能通过插件将基础编辑器打造成高效智能的开发环境。其优势在于启动快、资源占用低、内置git和调试工具，并拥有强大的插件生态，适配react、vue等各类前端技术栈。新手必装插件包括eslint与prettier（保障代码规范与格式…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • 使用MockWebServer对FeignClient进行单元测试 用户投稿

    使用MockWebServer对FeignClient进行单元测试

    本文详细阐述了如何利用Spring Cloud LoadBalancer和MockWebServer对FeignClient进行高效单元测试。通过在测试配置中动态注册MockWebServer实例，并将其作为FeignClient的服务发现目标，开发者可以精确模拟后端API的行为，包括各种HTTP响…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • Java中异常处理与方法返回值结合 用户投稿

    Java中异常处理与方法返回值结合

    异常发生时不应返回默认值，而应通过抛出异常或使用Optional、自定义结果类等方式明确传递错误信息，确保调用方能正确处理失败情况，提升代码健壮性与可读性。 在Java中，异常处理与方法返回值的结合是一个常见的编程问题。理解它们之间的关系有助于写出更健壮、可读性更强的代码。当一个方法可能发生异常时，…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • VSCode如何通过扩展实现Markdown预览 VSCode Markdown预览功能的配置方法 用户投稿

    VSCode如何通过扩展实现Markdown预览 VSCode Markdown预览功能的配置方法

    安装“markdown all in one”或“markdown preview enhanced”等扩展；2. 安装后通过ctrl+shift+v打开预览；3. 在设置中配置预览样式、主题、字体等；4. 启用“auto show preview to side”实现自动预览；5. 开启“scro…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • 递归实现列表排序检查与条件移除最大值 用户投稿

    递归实现列表排序检查与条件移除最大值

    本文详细介绍了如何使用Java递归方法处理整数列表。核心内容包括：首先检查列表是否已排序，如果已排序则直接返回false；如果未排序，则查找列表中的最大值。仅当最大值位于列表的起始或结束位置时，才将其移除并递归地继续处理列表。如果最大值位于列表中间，则打印当前列表并终止递归。 在数据处理和算法设计中…

    程序猿的头像 程序猿
    2026年9月22日
    100

发表回复

登录后才能评论
关注微信