用CSS实现嫦娥奔月，几行代码搞定

2023-12-21 04:23:18

CSS嫦娥奔月动画：用代码描绘诗意中秋

中秋佳节临近，何不利用CSS的魔力，创造一个如诗如画的嫦娥奔月动画，为节日增添一份科技与文化的韵味？本教程将一步步指导你实现这个动画，即使你是编程新手，也能轻松上手。

准备工作：HTML与CSS的协奏

首先，我们准备一个HTML文件和一个CSS文件，分别负责页面结构和样式定义。在HTML文件中，使用<div>元素作为动画容器，而在CSS文件中定义它的背景、尺寸和位置。

创建背景：月夜下的诗意画卷

使用CSS的background-image属性，将一张美丽的月夜图设置为背景。接着，background-size: cover让图片覆盖整个容器，background-position: center将其居中，打造出如梦似幻的夜空背景。

嫦娥起舞：轻盈曼妙的仙姿

接下来，使用CSS的position: absolute将嫦娥元素定位，让其自由移动。top和left属性确定嫦娥在容器中的位置，而width和height属性设置她的大小。

玉兔欢跳：灵动可爱的伴侣

同理，用CSS为玉兔创建元素，唯一不同的是将其放置在嫦娥旁边，形成和谐的画面。

桂花飘香：醉人芳香的点缀

桂花是中秋的象征，使用CSS的animation属性，我们可以让桂花在空中飘香。定义@keyframes规则设置动画效果，再将animation属性应用到桂花元素上，桂花便在夜风中摇曳生姿。

中秋祝福：科技传递的温暖

最后，添加一个中秋节祝福语，使用CSS的text-align: center居中显示。font-size和color属性分别设置字体大小和颜色，让祝福语醒目而温馨。

代码示例：让魔法跃然屏幕

<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <div id="chang'e"></div>
    <div id="yutu"></div>
    <div id="gui花"></div>
  </div>
  <div id="blessing">中秋节快乐</div>
</body>
</html>

#container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("moon.jpg");
  background-size: cover;
  background-position: center;
}

#chang'e {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-image: url("chang'e.png");
}

#yutu {
  position: absolute;
  top: 55%;
  left: 55%;
  width: 50px;
  height: 50px;
  background-image: url("yutu.png");
}

#gui花 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  animation: gui花 3s infinite;
}

@keyframes gui花 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

#blessing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: #ffffff;
}