手把手教你用 CSS 实现日月交替

前端

2023-09-13 20:57:19

前言

在《一天的深思熟虑》之后，我们怀着满腔热情，将目光投向了浩瀚星空，决心用纯 CSS 代码再现太阳的光辉。这个看似简单的任务却蕴含着无数的挑战，但我们没有退缩。

准备工作

在踏上这段 CSS 之旅之前，我们必须准备好以下必需品：

任何现代网络浏览器（推荐使用 Chrome 或 Firefox）
一个文本编辑器或代码编辑器（例如 Visual Studio Code 或 Sublime Text）

创建画布

我们的第一个任务是创建一个空白画布来容纳我们的日月交替。在你的代码编辑器中，创建一个新的 HTML 文件并输入以下代码：

<!DOCTYPE html>
<html>
  <head>
    
    <style>
      body {
        background-color: #000;
      }
    </style>
  </head>
  <body>
  </body>
</html>

绘制月亮

为了绘制月亮，我们将使用 CSS 的 box-shadow 属性。此属性允许我们在元素周围创建逼真的阴影效果，这非常适合模拟月亮的柔和光线。

在 <body> 标签内添加以下代码：

#moon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px #888;
}

这将创建一个 100px x 100px 的圆形白色元素，其周围环绕着灰色阴影。这是我们月亮的基本形状。

旋转月亮

现在，我们想让月亮围绕太阳旋转。我们可以使用 CSS 的 transform 属性来实现这一效果。

#moon {
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

这将使月亮以 10 秒为周期围绕其中心旋转 360 度。

绘制太阳

接下来，让我们添加太阳。太阳将使用 linear-gradient 属性，该属性允许我们在元素中创建平滑的色彩过渡。

在 <body> 标签内添加以下代码：

#sun {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(#ffc000, #ff8000);
}

这将创建一个 200px x 200px 的圆形黄色元素，它从中心向边缘逐渐变为橙色。

移动太阳

为了营造日出和日落的效果，我们需要让太阳从地平线升起和落下。我们可以使用 CSS 的 translateY 属性来实现这一效果。

#sun {
  animation: move 10s linear infinite alternate;
}

@keyframes move {
  from {
    transform: translateY(200px);
  }
  to {
    transform: translateY(0px);
  }
}

这将使太阳以 10 秒为周期从屏幕底部移动到屏幕顶部，然后又移动回屏幕底部。

添加阴影

为了增加真实感，让我们在月亮和太阳周围添加阴影。

#moon {
  box-shadow: 0 0 20px #888, 0 0 50px #555;
}

#sun {
  box-shadow: 0 0 20px #ff8000, 0 0 50px #ff0000;
}

这将为月亮和太阳添加两层阴影，使它们看起来更具立体感和真实感。

叠加元素

现在，我们需要将月亮和太阳叠加在一起，以便月亮可以在太阳前移动。

#moon {
  position: absolute;
  top: 50px;
  left: 100px;
  z-index: 2;
}

#sun {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 1;
}

这将使月亮定位在太阳之上，并出现在其前面。

完成

现在，所有部件已经到位，我们可以看到日月交替的壮观效果了。你的 HTML 文件现在应该如下所示：

<!DOCTYPE html>
<html>
  <head>
    
    <style>
      body {
        background-color: #000;
      }

      #moon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 0 20px #888, 0 0 50px #555;
        animation: rotate 10s linear infinite;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      #sun {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: linear-gradient(#ffc000, #ff8000);
        box-shadow: 0 0 20px #ff8000, 0 0 50px #ff0000;
        animation: move 10s linear infinite alternate;
        position: absolute;
        top: 100px;
        left: 100px;
        z-index: 1;
      }

      @keyframes move {
        from {
          transform: translateY(200px);
        }
        to {
          transform: translateY(0px);
        }
      }

      #moon {
        position: absolute;
        top: 50px;
        left: 100px;
        z-index: 2;
      }
    </style>
  </head>
  <body>
  </body>
</html>