CSS 夜灯

2024-02-09 19:22:10

照亮黑暗：利用 CSS 打造夜灯

在漫漫长夜中，一盏温暖的夜灯可以带来安心与舒适。如果没有实际的灯具，我们还可以利用 CSS 的强大功能，打造一个虚拟的夜灯，为我们的夜晚增添一丝亮光。

1. 构造夜灯容器

首先，我们需要创建一个 HTML 元素作为夜灯的容器。例如：

<div class="night-light"></div>

2. 点亮夜灯

接下来，我们为容器设置背景颜色。为确保夜灯在黑暗中可见，建议选择亮色，例如：

.night-light {
  background-color: #FF9900;
}

3. 定位和调整尺寸

现在，我们需要设置夜灯的位置和大小。将其定位在屏幕中央，并根据需要调整尺寸：

.night-light {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 赋予生命：呼吸动画

为了让夜灯更加逼真，我们可以添加一个呼吸动画，让它轻盈地闪烁，犹如真实的夜灯：

.night-light {
  animation: breath 2s infinite alternate;
}

@keyframes breath {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

这段 CSS 代码使用 @keyframes 规则定义了 breath 动画，然后将该动画应用于夜灯元素，使其在两秒内循环交替地淡入淡出，并略微缩放。

5. 完整的代码

以下是完整代码，它将创造一个功能齐全的 CSS 夜灯：

<!DOCTYPE html>
<html>
<head>
  <style>
    .night-light {
      background-color: #FF9900;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: breath 2s infinite alternate;
    }

    @keyframes breath {
      from {
        opacity: 1;
        transform: scale(1);
      }

      to {
        opacity: 0.5;
        transform: scale(1.2);
      }
    }
  </style>
</head>
<body>
  <div class="night-light"></div>
</body>
</html>