本教程详细讲解如何利用纯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更易于维护和扩展。
装修公司企业网站源码2.0下载装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。
立即学习“前端免费学习笔记（深入）”；
$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:
更多相关专题
js获取数组长度的方法在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。
540
2023.06.20
js刷新当前页面js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容
372
2023.07.04
js四舍五入js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容
727
2023.07.04
js删除节点的方法js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
470
2023.09.01
JavaScript转义字符JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。
391
2023.09.04
js生成随机数的方法js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。
989
2023.09.04
如何启用JavaScriptJavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。
653
2023.09.12
Js中Symbol类详解javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。
541
2023.09.20
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
