创建仅使用 CSS 的昼夜切换开关

2025-06-08

创建仅使用 CSS 的昼夜切换开关

您可能还记得我根据 dribbble shot 重新创建了这个很酷的CSS 磨砂玻璃效果。

这样做非常酷，我想测试一些复选框技术，所以决定寻找一个很酷的开关效果。

我发现了卡蒂亚·德胡安的这张精彩的运球照片

日夜切换设计

在本文中，我将重新创建它CSS并帮助您了解执行相同操作所需的元素和代码。

结果将如下所示：

CSS 仅切换复选框

HTML结构

<input type="checkbox" id="toggle" class="toggle--checkbox" />
<label for="toggle" class="toggle--label">
  <span class="toggle--label-background"></span>
</label>
<div class="background"></div>
Enter fullscreen mode Exit fullscreen mode

是的，这就是HTML我们需要的全部内容，很奇怪吧？
我们会用很多伪元素来添加一些小的样式技巧。

基本思路是，我们用标签来控制复选框，复选框反过来会被隐藏，
但其选中状态会引起切换效果。

我们之前确实在这篇CSS 自定义复选框文章中使用过这种效果。

CSS 仅限日/夜切换开关

为了创建我们的开关，我们需要使用相当多的伪元素。

先从基础开始吧。
我们需要隐藏复选框，复选框仅用于切换样式。

标签将是可见的，并切换复选框

我们使用“display: none”来隐藏复选框

.toggle--checkbox {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

一旦解决了这个问题，我们就可以使用CSS 网格将所有内容置于身体的中心。

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

在本教程中，我使用CSS 变量，仅用于颜色，以下是变量声明：

:root {
  /** sunny side **/
  --blue-background: #c2e9f6;
  --blue-border: #72cce3;
  --blue-color: #96dcee;
  --yellow-background: #fffaa8;
  --yellow-border: #f5eb71;
  /** dark side **/
  --indigo-background: #808fc7;
  --indigo-border: #5d6baa;
  --indigo-color: #6b7abb;
  --gray-border: #e8e8ea;
  --gray-dots: #e8e8ea;
  /** general **/
  --white: #fff;
}
Enter fullscreen mode Exit fullscreen mode

然后，我们应该转到标签样式，正如您在最终结果中看到的那样，这大约是太阳和月亮元素大小的两倍。

我们还添加了一个过渡效果，以便轻松实现动画效果。在本例中，动画效果是背景和边框颜色。

.toggle--label {
  width: 200px;
  height: 100px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
  position: relative;
  transition: all 350ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

此代码将产生以下结果。

CSS 切换标签样式

让我们添加第一个伪元素——太阳图标。
它是一个绝对位置元素，具有固定的宽度和高度。

.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: '';
  width: 82px;
  height: 82px;
  border: 5px solid var(--yellow-border);
  top: 4px;
  left: 4px;
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}
Enter fullscreen mode Exit fullscreen mode

注意：不要使用 border-radius: 50% 因为我们想要扩大这个元素的宽度。

现在我们应该看到以下结果。

太阳前的 CSS 切换

我们还添加了一个名为“反向”的自定义动画，该动画需要 350 毫秒才能完成，填充模式设置为“前进”，这意味着它将在最后一帧停止。

该动画如下：

@keyframes reverse {
  0% {
    left: 104px;
    width: 82px;
  }
  60% {
    left: 72px;
    width: 112px;
  }
  100% {
    left: 4px;
  }
}
Enter fullscreen mode Exit fullscreen mode

具体做法是，我们从初始值开始，然后在 60% 的时间（350 毫秒）内修改左侧位置和宽度。
然后，在 60% 到 100% 的时间范围内，我们将位置改为 4px。
这样就得到了一个漂亮的增长和移动效果。

CSS 太阳动画

我们还看到主背景 div，它用于全彩色并且绝对定位在我们的主体中。

唯一会改变的是背景颜色。

.background {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--blue-background);
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all 250ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

添加云细节

您可能还注意到太阳切换中的白云，我们将对其进行动画处理以将其转变为星星，因此它基于三个元素。

主要元素是标签内的 span 背景。它又包含一个 before 和 after 伪元素。

主跨度相对位于右侧，它的转换需要 150 毫秒，因此比我们的主要切换更快。

.toggle--label-background {
  width: 10px;
  height: 5px;
  border-radius: 5px;
  position: relative;
  background: var(--white);
  left: 135px;
  top: 45px;
  transition: all 150ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

仅此一点就会导致以下结果：

CSS 太阳云

之前和之后是绝对定位的元素，类似于云的顶部和底部。

.toggle--label-background:before {
  content: '';
  position: absolute;
  top: -5px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -20px;
  transition: all 150ms ease-in;
}
.toggle--label-background:after {
  content: '';
  position: absolute;
  top: 5px;
  width: 40px;
  height: 5px;
  border-radius: 5px;
  background: var(--white);
  left: -10px;
  transition: all 150ms ease-in;
}
Enter fullscreen mode Exit fullscreen mode

有了这些，我们就得到了看起来很简单的云。

CSS 云朵与太阳的切换

根据检查的类改变 CSS 样式

现在我们有了默认的阳光侧开关，让我们继续看看如何让它切换到夜间模式。

有一个非常酷的功能，您可以检测复选框的选中状态，然后定位下一个元素。

代码如下

.toggle--checkbox:checked + element {
  // Element can be after our checkbox
}
Enter fullscreen mode Exit fullscreen mode

知道了这一点我们就从背景说起。

.toggle--checkbox:checked ~ .background {
  background: var(--indigo-background);
}
Enter fullscreen mode Exit fullscreen mode

现在如果我们点击标签，背景就会改变。

CSS Checked 类背景切换

了解了这一点之后，我们就可以继续将这一原则用于我们的标签。

我说过我们只需要改变背景和边框，所以 CSS 如下

.toggle--checkbox:checked + .toggle--label {
  background: var(--indigo-color);
  border-color: var(--indigo-border);
}
Enter fullscreen mode Exit fullscreen mode

其结果如下

CSS 切换背景

让我们继续将太阳变成月亮，这与改变背景和边框的想法相同，但是我们想要反转动画，因此我们为该动画添加另一个自定义动画。

.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}
Enter fullscreen mode Exit fullscreen mode

太阳到月亮的 CSS 动画

动画与“反向”动画相同，但是从左到右。

@keyframes switch {
  0% {
    left: 4px;
  }
  60% {
    left: 4px;
    width: 112px;
  }
  100% {
    left: 104px;
    width: 82px;
  }
}
Enter fullscreen mode Exit fullscreen mode

然后对于月亮，我们需要添加另一个来显示一些凹痕。

.toggle--label:after {
  transition-delay: 0ms;
  transition: all 250ms ease-in;
  position: absolute;
  content: '';
  box-shadow: var(--gray-dots) -13px 0 0 2px, var(--gray-dots) -24px 14px 0 -2px;
  left: 143px;
  top: 23px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-radius: 50%;
  opacity: 0;
}
Enter fullscreen mode Exit fullscreen mode

它的不透明度为 0，一旦选中，我们就会显示它。
你还会看到我们使用了 box-shadow 来实际创建此效果。
它的作用是在实际元素左侧创建两个圆圈。

然后，一旦我们点击，CSS 就需要改变不透明度

.toggle--checkbox:checked + .toggle--label:after {
  transition-delay: 350ms;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

我认为这些小酒窝会带来很大的不同，你不同意吗？

CSS 月亮酒窝

最后一部分是我们要移动云并将其变成三颗星。

我们移动位置并使它们变小一些。

.toggle--checkbox:checked + .toggle--label .toggle--label-background {
  left: 60px;
  width: 5px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:before {
  width: 5px;
  height: 5px;
  top: -25px;
}
.toggle--checkbox:checked + .toggle--label .toggle--label-background:after {
  width: 5px;
  height: 5px;
  left: -30px;
  top: 20px;
}
Enter fullscreen mode Exit fullscreen mode

这给了我们以下最终结果，请在 Codepen 上玩一下。

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

鏂囩珷鏉ユ簮锛�https://dev.to/dailydevtips1/creating-day-night-css-only-toggle-switch-4p19
Devto 翻译
PREV
CSS隐藏滚动条
NEXT
使用 CSS 为 SVG 路径制作动画