当先锋百科网

首页 1 2 3 4 5 6 7

枫叶飘落的html 代码

枫叶飘落是一个美丽的自然景象，让人感受到了秋天的到来。在HTML代码中，我们可以使用pre标签来显示代码片段，如下所示：

枫叶飘落的html 代码


<!DOCTYPE html>
<html>
  <head>
    <title>枫叶飘落</title>
    <style>
      /* 定义枫叶样式 */
      .leaf {
        width: 50px;
        height: 50px;
        position: absolute;
        -webkit-animation-name: leaf-fall;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-name: leaf-fall;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      
      /* 定义枫叶下落动画 */
      @-webkit-keyframes leaf-fall {
        from { transform: translate(0, -10%); }
        to { transform: translate(0, 110%); }
      }
      
      @keyframes leaf-fall {
        from { transform: translate(0, -10%); }
        to { transform: translate(0, 110%); }
      }
      
      /* 定义背景颜色和大小 */
      body {
        background-color: #f9e6d9;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <!-- 插入枫叶 -->
    <div class="leaf" style="background-image: url(leaf.png);"></div>
    
    <script>
      /* 随机生成枫叶位置 */
      function randomPosition() {
        return Math.floor(Math.random() * 90) + 1 + "%";
      }
      
      /* 插入多个枫叶 */
      for (var i = 0; i < 50; i++) {
        var leaf = document.createElement("div");
        leaf.className = "leaf";
        leaf.style.backgroundImage = "url(leaf.png)";
        leaf.style.left = randomPosition();
        leaf.style.animationDelay = Math.random() * 5 + "s";
        document.body.appendChild(leaf);
      }
    </script>
  </body>
</html>
在这段代码中，我们定义了一个名为“leaf”的CSS类，用于控制枫叶的样式和动画。我们还定义了背景颜色和大小，以及插入了多个随机位置的枫叶元素。最后，我们用JavaScript随机生成枫叶位置，并插入多个枫叶元素。这段代码可以在HTML文件中使用，并与其他代码一起组成网页。