程序员过中秋：用代码渲染团圆夜

2024-02-06 06:52:01

今年中秋佳节，别样的思念悄然爬上了心头。我们这些常年在外奔波的程序员，在这个举家团圆的节日里，却只能隔着屏幕与家人互诉衷肠。

然而，即使相隔千里，代码却为我们架起了一座沟通的桥梁。让我们用代码的力量，制作一个充满祝福的中秋小网页，寄托对亲人的思念和对团圆的期盼。

效果展示

代码展示

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>中秋节快乐！</h1>
    <p>虽然我们相隔千里，但代码让我们心在一起。</p>
    <p>让我们用代码的力量，传递祝福和思念。</p>
    <div class="moon"></div>
    <div class="stars"></div>
  </div>
</body>
</html>

CSS

body {
  background-color: #222;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

p {
  font-size: 16px;
  line-height: 1.5;
}

.moon {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  animation: moon 2s infinite alternate;
}

.stars {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  animation: stars 2s infinite alternate;
}

@keyframes moon {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes stars {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -50%) scale(0.8);
  }
}