有趣的css - 暗黑模式切换开关

设计师工作日常

已于 2024-05-21 12:23:44 修改

阅读量1.2k

点赞数 42

分类专栏：有趣的css 文章标签： css 前端切换按钮暗黑模式开关动画 ui 交互

于 2024-03-14 10:27:19 首次发布

本文链接：https://blog.csdn.net/justliu1989/article/details/136700327

版权

有趣的css 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 打造一个切换界面暗黑模式的按钮开关，通过点击来切换太阳和月亮的图标。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

用css打造一个切换界面暗黑模式的按钮开关。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<label class="label34">
  <input class="inp34" type="checkbox">
  <span class="check-span34"></span>
</label>

用 label 和 input 标签绘制开关按钮，span 标签绘制简约的月亮和太阳图标。

css 部分代码

.label34{
  width: 60px;
  height: 32px;
  position: relative;
  cursor: pointer;
}
.inp34{
  display: none;
}
.check-span34{
  width: 100%;
  height: 100%;
  display: block;
  background-color: #383838;
  border: 2px solid #383838;
  box-sizing: border-box;
  border-radius: 16px;
  transition: 0.3s linear;
}
.check-span34:after{
  content: '';
  width: 22px;
  height: 22px;
  background-color: #383838;
  box-shadow: inset -8px -4px 0 #ffffff;
  border-radius: 11px;
  position: absolute;
  top: 5px;
  left: 6px;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
  background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
  transform: translateX(26px);
  background-color: orange;
  box-shadow: none;
}

通过 :checked 属性选择器获取开关的状态，利用 span 标签通过 box-shadow 属性来实现月亮和太阳图标，然后通过 transition 过渡属性来实现开关时月亮和太阳图标的过渡变化，给人视觉上开关的效果。

完整代码如下

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="label34">
        <input class="inp34" type="checkbox">
        <span class="check-span34"></span>
      </label>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label34{
  width: 60px;
  height: 32px;
  position: relative;
  cursor: pointer;
}
.inp34{
  display: none;
}
.check-span34{
  width: 100%;
  height: 100%;
  display: block;
  background-color: #383838;
  border: 2px solid #383838;
  box-sizing: border-box;
  border-radius: 16px;
  transition: 0.3s linear;
}
.check-span34:after{
  content: '';
  width: 22px;
  height: 22px;
  background-color: #383838;
  box-shadow: inset -8px -4px 0 #ffffff;
  border-radius: 11px;
  position: absolute;
  top: 5px;
  left: 6px;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
}
.inp34:checked + .check-span34{
  background-color: #ffffff;
}
.inp34:checked + .check-span34:after{
  transform: translateX(26px);
  background-color: orange;
  box-shadow: none;
}