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

技术教程
2025-10-13 09:44:35

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

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

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

HTML结构概览

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

<label class="ThemeToggler" for="ThemeTogglerID">
  <input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS" checked />
  <div class="ThemeTogglerFill" >
    <div class="SunIcon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
        <!-- Sun SVG Path Data -->
        <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
        <path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
        <path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
        <path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
        <path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
        <path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
        <path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
        <path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
        <path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
      </svg>
    </div>
    <div class="MoonIcon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <!-- Moon SVG Path Data -->
        <path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
      </svg>
    </div>
  </div>
</label>

: 这是整个切换开关的外部容器，它与 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功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。
0 查看详情
$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:
<label class="ThemeToggler" for="ThemeTogglerID"> <input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS" checked /> <div class="ThemeTogglerFill" > <div class="SunIcon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" > <path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.