玉兔乐无忧，佳节共月圆

2023-10-25 08:29:40




中秋节将至，皓月当空，玉兔相伴。为了迎接这个团圆美满的节日，我们不妨用html和css画一个超级月亮，让小玉兔不再孤单。这个创意手工活动简单有趣，适合亲子共同参与，激发艺术创作灵感，让中秋节更添趣味和意义。

## 材料准备：

* 电脑或平板电脑
* 浏览器
* 文本编辑器
* html和css代码（见文末附录）

## 步骤：

1. 打开文本编辑器，新建一个html文件，并保存为“超级月亮.html”。
2. 在html文件中输入以下代码：

```html
<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: #000;
}

#moon {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="moon"></div>
</body>
</html>

将html文件保存，并用浏览器打开。你将看到一个白色的圆形，这就是我们的超级月亮。
为了让月亮更逼真，我们可以使用css来添加一些细节。在style标签中添加以下代码：

#moon {
  box-shadow: 0 0 20px #fff,
              0 0 50px #fff,
              0 0 80px #fff;
}

保存html文件，刷新浏览器。你会看到月亮周围出现了一个白色的光晕，这使得月亮看起来更加立体。
现在，我们可以添加小玉兔了。在body标签中添加以下代码：

<div id="rabbit">
  <img src="rabbit.png" alt="小玉兔">
</div>

将rabbit.png图片保存到与html文件相同的文件夹中。
在style标签中添加以下代码：

#rabbit {
  position: absolute;
  top: 200px;
  left: 200px;
}

#rabbit img {
  width: 100px;
  height: 100px;
}

保存html文件，刷新浏览器。你会看到小玉兔出现在月亮旁边。
为了让小玉兔看起来更可爱，我们可以使用css来添加一些动画效果。在style标签中添加以下代码：

#rabbit {
  animation: hop 1s infinite alternate;
}

@keyframes hop {
  0% {
    top: 200px;
  }
  50% {
    top: 180px;
  }
  100% {
    top: 200px;
  }
}

保存html文件，刷新浏览器。你会看到小玉兔开始跳来跳去。

结语：

这个中秋节，让我们用html和css来画一个超级月亮，让小玉兔不再孤单。这个创意手工活动简单有趣，适合亲子共同参与，激发艺术创作灵感，让中秋节更添趣味和意义。

附录：

html和css代码：

<!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: #000;
}

#moon {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#rabbit {
  position: absolute;
  top: 200px;
  left: 200px;
}

#rabbit img {
  width: 100px;
  height: 100px;
}

@keyframes hop {
  0% {
    top: 200px;
  }
  50% {
    top: 180px;
  }
  100% {
    top: 200px;
  }
}

#rabbit {
  animation: hop 1s infinite alternate;
}
</style>
</head>
<body>
<div id="moon"></div>
<div id="rabbit">
  <img src="rabbit.png" alt="小玉兔">
</div>
</body>
</html>

css：

body {
  background-color: #000;
}

#moon {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px #fff,
              0 0 50px #fff,
              0 0 80px #fff;
}

#rabbit {
  position: absolute;
  top: 200px;
  left: 200px;
}

#rabbit img {
  width: 100px;
  height: 100px;
}

@keyframes hop {
  0% {
    top: 200px;
  }
  50% {
    top: 180px;
  }
  100% {
    top: 200px;
  }
}

#rabbit {
  animation: hop 1s infinite alternate;
}