网站首页
精品模板
会员模板
建站资源
站长素材
建站教程
编程笔记
编程问答
编程笔记
html教程 css教程 前端开发 cms教程 seo优化 网页设计 服务器 数据库 平面设计 电脑教程 编程教程 互联网 移动开发 php编程 java编程 实例代码 Python编程
沃梦达建站-编程笔记-前端开发-正文

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

2023-12-07前端开发
14

基于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代码生成树叶元素。

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能，html代码部分： !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果，最终效果如下图所示： 实现代码如下，在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112
layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候，需要点击文本输入框调起弹出选择框并选择内容，这个要怎么操作呢？以下两种方法可以参考： 1、点击名称，弹出信息弹框，选择表格中的某一行，实现效果如下： html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167
网站部署https后百度地图不显示问题
https的网站如果引用百度地图，会出现加载不了的问题，这是因为涉及到跨域问题，网站是https的，但是引用百度地图的是http的，这个要怎么操作呢？ 比如我引用的地址：http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下，少了一个s=1字段，加一下s=1...
2025-07-28 前端开发
139
微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候，客户提了一个功能需求优化，就是长按文字需要复制全部内容，因为有的手机支持全选复制，有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码： van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78
js拖拽排序插件Sortable.js如何使用
由于项目功能需要，要实现对table中的行实现拖拽排序功能，找来找去发现Sortable.js能很好的满足这个需求，而且它还是开源的，于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器（IE9及以下除外） 支持...
2025-06-12 前端开发
161

热门文章

1HTML5 video视频播放标签如何添加封面图片 2微信小程序动画（Animation）的实现及执行步骤 3layui获取select选中的文本 4JS错误之：Uncaught ReferenceError: $ is not defined 5layui formSelects实现下拉框select多选,并且编辑时候回显 6jquery轻量级数字动画插件countUp.js使用详解 7Layui Table 的列隐藏问题 8查看Iconfont字体有哪些图标和编码

热门精品源码

最新VIP资源

1多功能实用站长工具箱html功能模板 2多风格简历在线生成程序网页模板 3论文相似度查询系统源码 4响应式旅游景点宣传推广页面模板 5在线起名宣传推广网站源码 6酷黑微信小程序网站开发宣传页模板 7房产销售交易中介网站模板 8小学作业自动生成程序