HTML5实现逼真树叶飘落动画详解

本文将介绍一个基于HTML5的逼真树叶飘落动画项目。该动画使用图片作为树叶元素，而非通过CSS3绘制，但其动画效果极为逼真。值得注意的是，此动画基于WebKit内核开发，因此建议在WebKit内核的浏览器中查看以获得最佳体验。

您可以点击在线演示源码下载链接获取该项目的完整源代码。

HTML结构

HTML部分主要定义了一个容器和一些用于展示动画效果的元素：

  

  

    基于WebKit的落叶动画示例
  

CSS样式

CSS部分负责设置页面布局和动画效果：

#container {
  position: relative;
  height: 700px;
  width: 500px;
  margin: 10px auto;
  overflow: hidden;
  border: 4px solid #5C090A;
  background: #4E4226 url('images/backgroundLeaves.jpg') no-repeat top left;
}
#leafContainer {
  position: absolute;
  width: 100%;
  height: 100%;
}
#message {
  position: absolute;
  top: 160px;
  width: 100%;
  height: 300px;
  background: transparent url('images/textBackground.png') repeat-x center;
  color: #5C090A;
  font-size: 220%;
  font-family: 'Georgia';
  text-align: center;
  padding: 20px 10px;
  -webkit-box-sizing: border-box;
  -webkit-background-size: 100% 100%;
  z-index: 1;
}
p {
  margin: 15px;
}
a {
  color: #5C090A;
  text-decoration: none;
}
em {
  font-weight: bold;
  font-style: normal;
}
.phone {
  font-size: 150%;
  vertical-align: middle;
}
#leafContainer > div {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-animation-iteration-count: infinite, infinite;
  -webkit-animation-direction: normal, normal;
  -webkit-animation-timing-function: linear, ease-in;
}
#leafContainer > div > img {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade {
  0% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}
@-webkit-keyframes drop {
  0% { -webkit-transform: translate(0px, -50px); }
  100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin {
  0% { -webkit-transform: rotate(-50deg); }
  100% { -webkit-transform: rotate(50deg); }
}
@-webkit-keyframes counterclockwiseSpinAndFlip {
  0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
  100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}

Javascript逻辑

Javascript部分负责动态生成树叶元素并控制其动画效果：

const LEAF_COUNT = 30;

function init() {
  const cOntainer= document.getElementById('leafContainer');
  for (let i = 0; i     container.appendChild(createLeaf());
  }
}

function randomNumber(min, max) {
  return min + Math.floor(Math.random() * (max - min));
}

function randomFloat(min, max) {
  return min + Math.random() * (max - min);
}

function pixelValue(value) {
  return `${value}px`;
}

function durationValue(value) {
  return `${value}s`;
}

function createLeaf() {
  const leafDiv = document.createElement('div');
  const leafImg = document.createElement('img');
  leafImg.src = `images/realLeaf${randomNumber(1, 5)}.png`;
  leafDiv.style.top = "-100px";
  leafDiv.style.left = pixelValue(randomNumber(0, 500));
  const spinAnimation = Math.random() <0.5 ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
  leafDiv.style.webkitAnimatiOnName= 'fade, drop';
  leafImg.style.webkitAnimatiOnName= spinAnimation;
  const fadeDropDuration = durationValue(randomFloat(5, 11));
  const spinDuration = durationValue(randomFloat(4, 8));
  leafDiv.style.webkitAnimatiOnDuration= `${fadeDropDuration}, ${fadeDropDuration}`;
  leafDiv.style.webkitAnimatiOnDelay= `${durationValue(randomFloat(0, 5))}, ${durationValue(randomFloat(0, 5))}`;
  leafImg.style.webkitAnimatiOnDuration= spinDuration;
  leafDiv.appendChild(leafImg);
  return leafDiv;
}

window.addEventListener('load', init, false);

以上是关于HTML5实现逼真树叶飘落动画的详细介绍。如果您对更多相关技术内容感兴趣，欢迎访问GXLCMS。