日夜间切换开关

创作时间:

作者:

@小白创作中心

日夜间切换开关

引用

CSDN

https://blog.csdn.net/justliu1989/article/details/143326117

本文将介绍如何使用CSS实现一个日间/夜间模式切换开关按钮。这个功能在现代网页设计中非常常见，能够提升用户的使用体验。

整体效果

实现这个功能主要用到了以下CSS知识点：

transition 过渡属性
:before 和 :after 伪元素选择器
content 属性
:checked 选择器
appearance 自定义外观属性

核心思路是自定义多选框外观，通过过渡动画切换日夜模式图标，并改变提示文字。这种效果可以增强用户的交互体验。

核心代码

HTML 代码

<label class="label78">
  <input type="checkbox" class="checkbox78" />
  <div class="status78"></div>
</label>

按钮开关主体代码结构。

CSS 部分代码

.label78{
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.checkbox78{
  width:90px;
  height:40px;
  background-color:#000000;
  border-radius:20px;
  margin:0;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.4s linear;
  appearance: none;
  -webkit-appearance: none;
}
.status78{
  width:16px;
  height:16px;
  background-color: transparent;
  box-shadow: inset -6px -4px 0 yellow;
  border-radius:50%;
  position: absolute;
  right:17px;
  top:12px;
  transition: all 0.4s linear;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status78:after{
  content:'夜间';
  font-size:14px;
  font-weight: bold;
  color:#ffffff;
  letter-spacing:3px;
  line-height:1;
  position: absolute;
  left:-38px;
  top:1px;
}
.checkbox78:checked{
  background-color:#ebebeb;
}
.checkbox78:checked+.status78{
  width:16px;
  height:16px;
  box-shadow: inset -16px -16px 0 red;
  right:17px;
}
.checkbox78:checked+.status78:after{
  content:'日间';
  color:#000000;
}

定义 label 标签以及 input 标签的基本样式，定义 input 标签的 type 属性为 type="checkbox"。
通过 appearance 自定义外观属性，定义多选框外观效果，并且给多选框添加过渡属性 transition: all 0.4s linear;，设置多选框所有属性可进行过渡动画进行。
定义 .status78 基本样式，通过 box-shadow 阴影效果来实现小月亮图标，同样给 status78 添加过渡属性 transition: all 0.4s linear;，设置所有属性可进行过渡动画进行。
基于 .status78 创建 :after 伪元素以及基本样式，配合 content 属性给按钮开关添加文字元素。
利用 :checked 选择器，当开关按钮被选中时，按钮背景颜色过渡，并且改变 .status78 月亮样式，通过改变 box-shadow 阴影属性值以及相关基本样式，让月亮小图标过渡变化成小太阳图标，以及变化 .status78:after 伪元素中的 content 属性，变化文字提示内容以及文字颜色。

特别说明： appearance 属性的浏览器兼容性不是很高，注意补充 -webkit-appearance 浏览器兼容效果。

完整代码

HTML 页面

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>日夜间切换开关</title>
</head>
<body>
<div class="app">
<label class="label78">
<input type="checkbox" class="checkbox78" />
<div class="status78"></div>
</label>
</div>
</body>
</html>

CSS 样式

.app{
  width:100%;
  height:100vh;
  background-color:#ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label78{
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.checkbox78{
  width:90px;
  height:40px;
  background-color:#000000;
  border-radius:20px;
  margin:0;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.4s linear;
  appearance: none;
  -webkit-appearance: none;
}
.status78{
  width:16px;
  height:16px;
  background-color: transparent;
  box-shadow: inset -6px -4px 0 yellow;
  border-radius:50%;
  position: absolute;
  right:17px;
  top:12px;
  transition: all 0.4s linear;
  display: flex;
  align-items: center;
  justify-content: center;
}
.status78:after{
  content:'夜间';
  font-size:14px;
  font-weight: bold;
  color:#ffffff;
  letter-spacing:3px;
  line-height:1;
  position: absolute;
  left:-38px;
  top:1px;
}
.checkbox78:checked{
  background-color:#ebebeb;
}
.checkbox78:checked+.status78{
  width:16px;
  height:16px;
  box-shadow: inset -16px -16px 0 red;
  right:17px;
}
.checkbox78:checked+.status78:after{
  content:'日间';
  color:#000000;
}

以上就是实现日间/夜间模式切换开关的所有代码，希望对你有一些帮助或者启发。

热门推荐

零基础AI实习：从入门到掌握AI的完美指南