实现如图所示的东西效果（落叶下落）：

html代码：

<!DOCTYPE html>

<html>

<head>

    <title>HTML5树叶飘落动画</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=500px, initial-scale=0.64">

    <link rel="stylesheet" href="leaves.css" type="text/css">

    <script src="leaves.js" type="text/javascript"></script>

</head>

<body>

    <div id="container">

        <div id="leafContainer"></div>

        <div id="message">

            <em>这是基于webkit的落叶动画</em>

        </div>

    </div>

</body>

</html>

css代码：

body

{

    background-color: #4E4226;

}

#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:;

}

em {

    font-weight: bold;

    font-style: normal;

}

#leafContainer > div {

    position: absolute;

    width: 100px;

    height: 100px;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: normal;

    -webkit-animation-timing-function: linear;

}

#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:; }

    95%  { opacity:; }

    100% { opacity:; }

}

@-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); }

}

js代码：

const NUMBER_OF_LEAVES = 30;

function init(){

    var container = document.getElementById('leafContainer');

    for (var i = 0; i < NUMBER_OF_LEAVES; i++) {

        container.appendChild(createALeaf());

    }

}

function randomInteger(low, high){

    return low + Math.floor(Math.random() * (high - low));

}

function randomFloat(low, high){

    return low + Math.random() * (high - low);

}

function pixelValue(value){

    return value + 'px';

}

function durationValue(value){

    return value + 's';

}

function createALeaf(){

    var leafDiv = document.createElement('div');

    leafDiv.style.top = "-100px";

    leafDiv.style.left = pixelValue(randomInteger(0, 500));

    leafDiv.style.webkitAnimationName = 'fade, drop';

    var fadeAndDropDuration = durationValue(randomFloat(5, 11));

    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;

    var leafDelay = durationValue(randomFloat(0, 5));

    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;

    var image = document.createElement('img');

    image.src = 'images/realLeaf' + randomInteger(1, 5) + '.png';

    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';

    image.style.webkitAnimationName = spinAnimationName;

    var spinDuration = durationValue(randomFloat(4, 8));

    image.style.webkitAnimationDuration = spinDuration;

    leafDiv.appendChild(image);

    return leafDiv;

}

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

转载地址：http://www.html5tricks.com/css3-fall-leaves.html

HTML5效果：实现树叶飘落的更多相关文章

  1. HTML5树叶飘落动画

    查看效果:http://keleyi.com/keleyi/phtml/css3/15.htm 请使用Chrome浏览器查看本效果. html源代码: <!DOCTYPE HTML> &l ...

  2. cocos2d-x 仿真树叶飘落效果的实现

    转自:http://blog.csdn.net/ufolr/article/details/7624851 最近项目中需要一个落叶的效果,本来想用粒子特效来实现,但是几经调试,虽然调出了落叶的效果,但 ...

  3. <转>cocos2d-x学习笔记（五）仿真树叶飘落效果的实现（精灵旋转、翻转、钟摆运动等综合运用）

    转载自ufolr的博客 原文连接:http://blog.csdn.net/ufolr/article/details/7624851 最近项目中需要一个落叶的效果,本来想用粒子特效来实现,但是几经调 ...

  4. 精选9个值得学习的 HTML5 效果【附源码】

    这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

  5. 精选9个值得学习的 HTML5 效果

    此文转自:http://www.cnblogs.com/lhb25/p/9-html5-effects.html,仅供本人学习参考,版权归原作者所有! 精选9个值得学习的 HTML5 效果[附源码] ...

  6. HTML5 canvas绘制雪花飘落动画（需求分析、知识点、程序编写分布详解）

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现:虽然哦很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难 ...

  7. HTML5 canvas绘制雪花飘落

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  8. 推荐六款炫酷的HTML5效果插件

    1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 ...

  9. HTML5效果：Canvas 实现圆形进度条并显示数字百分比

    实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...

随机推荐

  1. MFCC特征参数提取流程概述

      一 概念概述: 在语音识别(Speech Recognition)和话者识别(Speaker Recognition)方面,最常用到的语音特征就是梅尔倒谱系数(Mel-scale Frequenc ...

  2. vue好用的图片查看器(v-viewer插件)

    在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览.在网上找到了一款很好用的插件.拿来即用,不需要复杂的配置.特此记录下(这里只是针对于在vue脚手架下的使用方法). 1.安装依赖包. npm ...

  3. MySQL基础整理（一）之SQL基础（未完成）

    大家好,我是浅墨竹染,以下是MySQL基础整理(一)之SQL基础 1.SQL简介 SQL(Structure Query Language)是一种结构化查询语言,是使用关系模型的数据库应用语言. 2. ...

  4. spring boot -thymeleaf-异常处理

    异常流程 :controller-ControllerAdvice-异常解析器-默认的error页面 1.错误页面error.html: 程序出现异常会自动跳到error.html里,视频效果,该页面 ...

  5. 解决ios关于：ERROR Internal navigation rejected - <allow-navigation> not set for url='about:blank'

    在mac上,cordova打包ionic项目为苹果手机app出现 这个问题:ERROR Internal navigation rejected - <allow-navigation> ...

  6. logstash笔记（二）——grok之match

    官方文档: https://www.elastic.co/guide/en/logstash/current/plugins-filters-grok.html 基本语法: %{SYNTAX:SEMA ...

  7. mysql 开发进阶篇系列 50 表的数据导入(load data infile，mysqlimport )

    一.概述 上篇讲到的表的数据导出(select .. into outfile 或者mysqldump),这篇继续讲表的数据导入,导入也同样有二个方法,分别是load data infile... 和 ...

  8. 项目重构之数据源配置与优化：log4j 配置数据库连接池Druid，并实现日志存储到数据库

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节. 交流QQ群:[编程之美 365234583] ...

  9. 了解Java内存模型，看完这一篇就够了

    前言(此文草稿是年前写的,但由于杂事甚多一直未完善好.清明假无事,便收收尾发布了) 年关将近,个人工作学习怠惰了不少.两年前刚做开发的时候,信心满满想看看一个人通过自己的努力,最终能达到一个什么样的高 ...

  10. 一套能体现 RBAC 的表结构设计

    1.RBAC 概述 2.表结构设计 2.1.用户表 2.2.角色表 2.3.权限表 2.4.用户角色(关系)表 2.5.角色权限(关系)表 3.总结 1.RBAC 概述 RBAC(Role-Based ...