基于HTML5+Webkit实现树叶飘落动画

时间：2023-12-07

基于HTML5+Webkit实现树叶飘落动画可以分为以下步骤：

步骤1：准备工作

首先要准备一张树叶图片，推荐使用png格式的图片，因为png格式支持透明度。通过CSS样式，设置树叶的宽度、高度、位置以及初始透明度等。

步骤2：使用CSS3动画

通过CSS3动画，设置树叶从上往下坠落的动画效果。在这里我们使用 translateY() 函数来控制树叶的垂直位置，通过控制透明度和 transform 属性，来展现树叶从透明到实体的过渡效果。

@-webkit-keyframes leaf {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100px);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(0px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translateY(400px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(500px);
  }
}

步骤3：使用 JavaScript 控制动画

使用JavaScript代码，创建一个类函数，用来生成树叶元素。通过设置不同的树叶样式属性，来让树叶看起来更加真实。接下来，我们使用 window.setTimeout() 函数为每个树叶元素设置不同的延迟时间，来实现树叶元素的分散飘落效果。

class Leaf {
  constructor() {
    ...
  }
  render(parentNode) {
    ...
  }
}

function createLeaves() {
  for (let i = 0; i < 20; i++) {
    const leaf = new Leaf();
    leaf.render(document.body);
    setTimeout(() => {
      leaf.fall();
    }, Math.random() * 2000);
  }
}

示例1：实现一个简单的树叶飘落动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>树叶飘落动画示例</title>
    <style>
      .leaf {
        position: fixed;
        width: 80px;
        height: 50px;
        background-image: url('leaf.png');
        background-repeat: no-repeat;
        opacity: 0;
        -webkit-transform: translateY(-100px);
        -webkit-animation-name: leaf;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite; 
      }
      @-webkit-keyframes leaf {
        0% {
          opacity: 0;
          -webkit-transform: translateY(-100px);
        }
        20% {
          opacity: 1;
          -webkit-transform: translateY(0px);
        }
        80% {
          opacity: 1;
          -webkit-transform: translateY(400px);
        }
        100% {
          opacity: 0;
          -webkit-transform: translateY(500px);
        }
      }
    </style>
  </head>
  <body>
    <h1>树叶飘落动画示例</h1>
    <script>
      function createLeaves() {
        for (let i = 0; i < 10; i++) {
          const leaf = document.createElement('div');
          leaf.classList.add('leaf');
          document.body.appendChild(leaf);
        }
      }
      createLeaves();
    </script>
  </body>
</html>

示例2：实现一个点击按钮触发树叶飘落动画

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>树叶飘落动画示例2</title>
    <style>
      .leaf {
        position: fixed;
        width: 80px;
        height: 50px;
        background-image: url('leaf.png');
        background-repeat: no-repeat;
        opacity: 0;
        -webkit-transform: translateY(-100px);
        -webkit-animation-name: leaf;
        -webkit-animation-duration: 5s;
        -webkit-animation-iteration-count: infinite; 
      }
      .button {
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        font-size: 20px;
        border-radius: 5px;
        cursor: pointer;
      }
      @-webkit-keyframes leaf {
        0% {
          opacity: 0;
          -webkit-transform: translateY(-100px);
        }
        20% {
          opacity: 1;
          -webkit-transform: translateY(0px);
        }
        80% {
          opacity: 1;
          -webkit-transform: translateY(400px);
        }
        100% {
          opacity: 0;
          -webkit-transform: translateY(500px);
        }
      }
    </style>
  </head>
  <body>
    <h1>点击按钮触发树叶飘落动画</h1>
    <button class="button">开始</button>
    <script>
      function createLeaves() {
        for (let i = 0; i < 10; i++) {
          const leaf = document.createElement('div');
          leaf.classList.add('leaf');
          document.body.appendChild(leaf);
        }
      }
      const btn = document.querySelector('.button');
      btn.addEventListener('click', () => {
        createLeaves();
      });
    </script>
  </body>
</html>

这两个示例中，第一个示例演示了如何通过CSS3动画实现树叶飘落动画，第二个示例演示了如何通过点击按钮，使用JavaScript代码生成树叶元素。

上一篇：countUp.js实现数字动态变化效果 下一篇：js与flash的交互FLASH连播控制器