CSS实现带自定义图标的深浅模式切换滑块教程-html教程-PHP中文网

CSS实现带自定义图标的深浅模式切换滑块教程

本教程详细讲解如何利用css的伪元素::before和background-image属性，为深浅模式切换滑块的“滑块手柄”部分集成自定义图标（如太阳和月亮）。通过修改css样式，我们能在保持原有平滑过渡动画的同时，实现根据模式状态自动切换图标，从而显著提升用户界面的视觉吸引力和交互体验。

核心概念：利用CSS伪元素定制滑块图标

在前端开发中，常见的深浅模式切换滑块通常由一个隐藏的复选框（input[type="checkbox"]）和可见的span元素（作为滑块轨道）以及其::before伪元素（作为可拖动的“滑块手柄”）组成。为了在滑块手柄上显示自定义图标（如浅色模式下的太阳和深色模式下的月亮），我们可以利用CSS的background-image属性直接作用于这些伪元素。当复选框的状态（checked）改变时，对应的CSS规则会被激活，从而切换::before伪元素的背景图片，实现图标的动态变化。

HTML 结构概览

首先，我们需要一个基础的HTML结构来承载深浅模式切换功能。这个结构包含一个主容器、一个标签（label）来包裹滑块，以及一个隐藏的复选框和可视化的滑块轨道。

<main id="main">
  <p>这是一个示例文本，用于展示深浅模式切换效果。</p>
  <label class="switch">
    <input type="checkbox" onclick="darkLight()" id="checkBox">
    <span class="slider"></span>
  </label>
</main>

登录后复制

main#main: 页面主要内容区域，其背景色和文字颜色会根据模式切换。
label.switch: 这是整个切换开关的容器，它将复选框和滑块轨道关联起来。
input[type="checkbox"]: 实际控制模式切换的元素，通过CSS将其隐藏。它的checked状态是控制模式和图标显示的关键。
span.slider: 可见的滑块轨道，其::before伪元素将作为我们定制图标的“滑块手柄”。

CSS 样式实现

CSS是实现滑块视觉效果和图标切换的核心。我们将从基础样式开始，然后重点讲解如何通过background-image集成自定义图标。

基础滑块样式

以下是实现一个基本圆形滑块的基础CSS样式。这些样式定义了滑块的尺寸、形状、过渡效果以及手柄的初始位置。

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

body {
  margin: 0;
  padding: 0;
}
main {
  height: 100vh;
  width: 100vw;
  transition: background 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* 居中滑块和文本 */
}
main p {
  font-family: sans-serif;
  transition: color 0.3s ease;
  margin-bottom: 20px; /* 调整文本与滑块的间距 */
}
/*TOGGLE COLORS*/
.dark {
  background: #545454;
  color: #efefef;
}
p {
  background: none !important; /* 确保p标签背景不被覆盖 */
}

/*SWITCH*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0; /* 隐藏原始复选框 */
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* 浅色模式下的轨道背景色 */
  transition: 0.4s;
  border-radius: 30px; /* 圆角轨道 */
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white; /* 默认手柄背景色，将被图片替换 */
  transition: 0.4s;
  border-radius: 50%; /* 圆形手柄 */
}

input:checked + .slider {
  background-color: #2196f3; /* 深色模式下的轨道背景色 */
}

input:checked + .slider:before {
  transform: translateX(26px); /* 手柄向右移动 */
}

登录后复制

集成自定义图标

现在，我们来修改.slider:before和input:checked + .slider:before的样式，用背景图片替换默认的颜色。

Grok

马斯克发起的基于大语言模型(LLM)的AI聊天机器人TruthGPT，现用名Grok

437

查看详情

/* ... (保留上述所有基础CSS样式) ... */

/* 修改 .slider:before 以显示浅色模式图标 */
.slider:before {
  /* 移除或注释掉 background-color: white; */
  /* background-color: white; */ 
  background-image: url("https://i.imgur.com/6NVOxEL.png"); /* 替换为您的太阳图标URL */
  background-size: contain; /* 确保图片完整显示在手柄内 */
  background-repeat: no-repeat; /* 防止图片重复 */
  background-position: center; /* 图片居中 */

  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  transition: 0.4s;
  border-radius: 50%;
}

/* 修改 input:checked + .slider:before 以显示深色模式图标 */
input:checked + .slider:before {
   background-image: url("https://i.imgur.com/L8cR8EK.png"); /* 替换为您的月亮图标URL */
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;

  transform: translateX(26px); /* 手柄向右移动 */
}

登录后复制

关键修改点解释：

background-image: url(...): 这是设置图标的核心属性。您需要将示例URL替换为实际的太阳和月亮图标的路径。
background-size: contain;: 确保背景图片完整地缩放到手柄内部，而不会被裁剪。
background-repeat: no-repeat;: 防止图片在手柄内部重复平铺。
background-position: center;: 将背景图片在手柄内居中显示。
移除background-color: 在.slider:before中，如果设置了background-color: white;，它会覆盖背景图片。因此，当使用图片时，应将其移除或注释掉。

JavaScript 交互逻辑

JavaScript负责处理复选框的点击事件，切换页面的深浅模式类，并将当前模式状态保存到localStorage中，以便在页面刷新后保持模式。

// 确保在DOM加载完成后执行
$(document).ready(function() {
  // 根据 localStorage 恢复模式状态
  if (localStorage.toggled === 'dark') {
    $('#main, p').toggleClass('dark', true);
    $('#checkBox').prop("checked", true);
  } else {
    $('#main, p').toggleClass('dark', false);
    $('#checkBox').prop("checked", false);
  }
});

function darkLight() {
  /* DARK CLASS */
  if (localStorage.toggled !== 'dark') {
    $('#main, p').toggleClass('dark', true);
    localStorage.toggled = "dark";
  } else {
    $('#main, p').toggleClass('dark', false);
    localStorage.toggled = "";
  }
}

登录后复制

说明：

这段JavaScript代码主要通过jQuery的toggleClass()方法来为#main和p元素添加或移除dark类，从而改变页面的整体样式。
localStorage.toggled用于持久化用户的模式选择。
$(document).ready()中的代码确保页面加载时能根据localStorage中的状态正确设置模式和复选框的checked属性。
请注意，此JavaScript代码无需为图标切换做任何修改，因为图标的切换完全由CSS基于input:checked状态来控制。

完整示例代码

将上述HTML、CSS和JavaScript整合，即可实现一个带有自定义图标的深浅模式切换滑块。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带图标的深浅模式切换滑块</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        main {
            height: 100vh;
            width: 100vw;
            transition: background 0.3s ease;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        main p {
            font-family: sans-serif;
            transition: color 0.3s ease;
            margin-bottom: 20px;
        }
        /*TOGGLE COLORS*/
        .dark {
            background: #545454;
            color: #efefef;
        }
        p {
            background: none !important;
        }
        /*SWITCH*/
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 30px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            /* background-color: white; /* 移除此行，由背景图片替代 */
            transition: 0.4s;
            border-radius: 50%;

            /* 自定义图标样式 - 浅色模式 (太阳) */
            background-image: url("https://i.imgur.com/6NVOxEL.png"); /* 替换为您的太阳图标URL */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        input:checked + .slider {
            background-color: #2196f3;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
            /* 自定义图标样式 - 深色模式 (月亮) */
            background-image: url("https://i.imgur.com/L8cR8EK.png"); /* 替换为您的月亮图标URL */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <main id="main">
        <p>这是一个示例文本，用于展示深浅模式切换效果。</p>
        <label class="switch">
            <input type="checkbox" onclick="darkLight()" id="checkBox">
            <span class="slider"></span>
        </label>
    </main>

    <script>
        $(document).ready(function() {
            if (localStorage.toggled === 'dark') {
                $('#main, p').toggleClass('dark', true);
                $('#checkBox').prop("checked", true);
            } else {
                $('#main, p').toggleClass('dark', false);
                $('#checkBox').prop("checked", false);
            }
        });

        function darkLight() {
            if (localStorage.toggled !== 'dark') {
                $('#main, p').toggleClass('dark', true);
                localStorage.toggled = "dark";
            } else {
                $('#main, p').toggleClass('dark', false);
                localStorage.toggled = "";
            }
        }
    </script>
</body>
</html>

登录后复制

注意事项

图片资源管理： 示例中使用了Imgur的图片链接，但在实际生产环境中，强烈建议使用您自己托管的图片资源（例如，将图片存放在项目文件夹中，并使用相对路径），以避免因外部链接失效导致图标无法显示的问题。
图标尺寸与样式： 确保您选择的图标尺寸与滑块手柄（height: 26px; width: 26px;）相匹配，或者能够通过background-size和background-position进行良好调整。如果图标有边距或需要特殊对齐，可能需要微调background-position属性。
用户体验： 选择清晰、易于识别且符合深浅模式语义的图标，以提升用户体验。太阳和月亮图标是常见的选择，但您也可以根据品牌或应用风格进行定制。
可访问性： 对于更完善的解决方案，可以考虑为开关添加ARIA属性（如aria-label或aria-labelledby），以提高屏幕阅读器用户的可访问性。

总结

通过巧妙地利用CSS伪元素::before的background-image属性，我们能够轻松地为深浅模式切换滑块添加自定义图标。这种方法不仅保持了原有的平滑过渡动画，还极大地增强了用户界面的视觉吸引力和交互反馈。这种技术不仅限于深浅模式切换，也适用于任何需要根据状态变化显示不同图标的UI组件，为前端开发提供了强大的自定义能力。

以上就是CSS实现带自定义图标的深浅模式切换滑块教程的详细内容，更多请关注php中文网其它相关文章！