有趣的css - 暗黑模式切换按钮

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是一个丝滑的暗黑模式切换按钮。

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

整体效果

知识点：
① 伪选择器的灵活使用
② box-shadow 多重阴影属性的使用
③ animation 动画和 transform 变换属性的使用
④ input 多选框的使用

思路：利用 box-shadow 阴影实现小月亮形状，然后使用伪选择器配合 box-shadow 多重阴影属性实现小太阳形状，最后借助 input 多选框属性实现点击切换动画效果。

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

核心代码

html 代码

<label class="label47">
  <input type="checkbox" class="checkbox47" />
  <div class="status47"></div>
</label>

label 标签包括 input 标签，并设置 type="checkbox" 多选按钮，在 input 标签后增加一个 div 标签。

css 部分代码

.label47{
  width: 60px;
  height: 60px;
  border: 2px solid #000;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: -6px 6px 0 #000;
  box-sizing: border-box;
  transition: all 0.1s;
}
.checkbox47{
  display: none;
}
.status47{
  width: 30px;
  height: 30px;
  background-color: transparent;
  box-shadow: inset -12px -8px 0 #000;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: 12px;
  box-sizing: border-box;
  transition: all 0.4s;
}
.label47:active {
  box-shadow: 0px 0px #000;
  transform: translate(-6px, 6px);
}
.checkbox47:checked + .status47{
  width: 24px;
  height: 24px;
  box-shadow: inset -30px -30px 0 #000;
  top: 16px;
  left: 16px;
}
.checkbox47:checked + .status47:after{
  content: '';
  width: 10px;
  height: 10px;
  background-color: #000;
  box-shadow: 0 18px 0 -4px #000,
    18px 0 0 -4px #000,
    0 -18px 0 -4px #000,
    -18px 0 0 -4px #000,
    -12px 12px 0 -4px #000,
    -12px -12px 0 -4px #000,
    12px -12px 0 -4px #000,
    12px 12px 0 -4px #000;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 7px;
  box-sizing: border-box;
  animation: anieff47 0.4s ease-out forwards;
}
@keyframes anieff47{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

1、先隐藏 input 多选按钮，然后利用 div 标签，用 box-shadow 实现小月亮形状，然后利用 position 定位到中间，并添加 transition 过渡属性。

2、然后使用伪选择器 :after ，利用 box-shadow 多种阴影来模拟出 8 个小圆点，配合其他 css 样式，实现一个小太阳的形状，并且给小火焰增加 animation 动画属性，设置动画参数，添加关键帧，让 8 个小圆点从小变大显示。

3、然后利用 input 多选框 :checked 选择器来判断是否选中状态，根据选中状态，来切换小月亮和小太阳，形成视觉效果的切换。

完整代码如下

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="label47">
        <input type="checkbox" class="checkbox47" />
        <div class="status47"></div>
      </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;
}
.label47{
  width: 60px;
  height: 60px;
  border: 2px solid #000;
  position: relative;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: -6px 6px 0 #000;
  box-sizing: border-box;
  transition: all 0.1s;
}
.checkbox47{
  display: none;
}
.status47{
  width: 30px;
  height: 30px;
  background-color: transparent;
  box-shadow: inset -12px -8px 0 #000;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  left: 12px;
  box-sizing: border-box;
  transition: all 0.4s;
}
.label47:active {
  box-shadow: 0px 0px #000;
  transform: translate(-6px, 6px);
}
.checkbox47:checked + .status47{
  width: 24px;
  height: 24px;
  box-shadow: inset -30px -30px 0 #000;
  top: 16px;
  left: 16px;
}
.checkbox47:checked + .status47:after{
  content: '';
  width: 10px;
  height: 10px;
  background-color: #000;
  box-shadow: 0 18px 0 -4px #000,
    18px 0 0 -4px #000,
    0 -18px 0 -4px #000,
    -18px 0 0 -4px #000,
    -12px 12px 0 -4px #000,
    -12px -12px 0 -4px #000,
    12px -12px 0 -4px #000,
    12px 12px 0 -4px #000;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 7px;
  box-sizing: border-box;
  animation: anieff47 0.4s ease-out forwards;
}
@keyframes anieff47{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}