css动画编写一个枫叶背景

好的，您可以使用以下代码实现一个简单的 CSS 动画枫叶背景效果：

HTML 代码：

<div class="maple-leaves-bg">
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
  <div class="maple-leaf"></div>
</div>

CSS 代码：

.maple-leaves-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
}

.maple-leaf {
  position: absolute;
  left: -25px;
  top: -25px;
  width: 50px;
  height: 50px;
  background-image: url('maple-leaf.png');
  background-size: contain;
  background-repeat: no-repeat;
  animation: maple-leaf-fall 5s ease-in-out infinite;
}

@keyframes maple-leaf-fall {
  0% {
    transform:
      translateX(0)
      translateY(-100px)
      rotate(0deg);
  }
  100% {
    transform:
      translateX(50vw)
      translateY(125vh)
      rotate(720deg);
  }
}

这段代码中，首先我们创建了一个类名为 `maple-leaves-bg` 的 div 容器，给它设置了全屏的绝对定位，z-index 为 -1，并使用了 `overflow: hidden` 让其中的子元素溢出部分被隐藏。接下来八个类名为 `maple-leaf` 的 div 元素就是我们的枫叶了，它们被绝对定位在 `maple-leaves-bg` 容器内，并在左上角 (left: -25px; top: -25px;) 开始从页面外部下落。

接下来定义了名为 `maple-leaf-fall` 的关键帧动画，该动画会让枫叶沿着贝塞尔曲线下落，并在落地后旋转两圈后回到屏幕上方。最后再把动画应用到 `maple-leaf` 元素上。

请注意，在上述代码中，我没有使用您提供的任何外部资源（如图片或其他 CSS 文件），因此您需要在代码中第 10 行的 `background-image` 样式中替换成一个可用的枫叶图片路径。另外，此代码只是一个示例，您可以根据您的需要进行修改。