纯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%); // 垂直居中调整
  }

  样式解析：

  1. 变量定义:
     • 使用SCSS变量定义了开关的尺寸、颜色等，便于统一管理和修改。
  2. .ThemeToggler:
     • 定义了整个开关的宽度、高度、圆角和背景色。position: relative; 是为了让内部的绝对定位元素（如图标）能够相对于它进行定位。overflow: hidden; 确保了图标在切换时不会溢出边界。
  3. .ThemeTogglerFill:
     • 这是开关的“轨道”部分。其 ::before 伪元素创建了可左右移动的“滑块”。transition 属性为滑块的移动和背景色变化添加了平滑的动画效果。
  4. .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 可以实现更平滑的淡入淡出过渡效果。
  5. @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:

  
    
    
      
      
  
  相关栏目：
      【
          最新资讯    】
      【
          网络优化    】
      【
          主机评测    】
      【
          网站百科    】
      【
          技术教程    】
      【
          文学范文    】
      【
          分站    】
      【
          网址导航    】
      【
          关于我们    】