CSS实现月亮倒影：用代码模拟大自然的艺术之美

2023-12-17 23:05:26

在茫茫的夜空中，一轮皎洁的明月总是那么引人注目。它的倒影在水面上，波光粼粼，美不胜收。今天，我们就来用CSS实现月亮倒影的效果，让您的网页设计更添艺术气息。

一、准备工作

在开始之前，我们需要准备以下工具：

文本编辑器（如Visual Studio Code、Sublime Text等）
CSS代码（如本文提供的代码）
网页浏览器（如Chrome、Firefox等）

二、实现代码

首先，我们需要创建一个新的HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="moon"></div>
    <div class="water"></div>
  </div>
</body>
</html>

接下来，我们需要在style.css文件中添加以下CSS代码：

/* 容器 */
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* 月亮 */
.moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

/* 水面 */
.water {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 50vh;
  background-color: #000000;
}

/* 水面倒影 */
.water::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
  background-image: linear-gradient(to bottom, #000000 0%, #444444 100%);
}