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

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. 微信小程序合法域名配置-不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

    微信小程序合法域名配置-不校验合法域名.web-view(业务域名).TLS 版本以及 HTTPS 证书 很多教程说按照以上方式调用即可.但是当我们在程序中实际调用以上程序时,就会报错, http:/ ...

  2. CSS3——:nth-child选择器基本用法简述

    注:n 是从1开始的 :nth-child 是 CSS3 提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法 下面示例代码截图用的是同一个例子,p元素的父元素都是body   p ...

  3. gdb remote 使用

    //设置halt (gdb) set {int}0x400b0000 = 0x1(gdb) load //设置下一个pc指针的值(gdb) set {int}0x400b2000 = 0x80(gdb ...

  4. knn算法的c语言实现

    最近研究KNN,找到了一些优秀的源码,贴出来,做个笔记吧. #include<stdio.h> #include<stdlib.h> #include<math.h> ...

  5. PHP验证码生成及图片处理（GD库）

    GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印. 本章实现了生成图片并绘画各种形状.图片的压缩.中文字符水印及图片水印 ...

  6. Python编程Day7——字符编码、字符与字节、文件操作

    一.字符编码 重点 ***** 1. 什么是字符编码:将人识别的字符转换计算机能识别的01,转换的规则就是字符编码表2. 常用的编码表:ascii.unicode.GBK.Shift_JIS.Euc- ...

  7. C++版 - 剑指offer 面试题16：反转链表(Leetcode 206: Reverse Linked List) 题解

    面试题16:反转链表 提交网址: http://www.nowcoder.com/practice/75e878df47f24fdc9dc3e400ec6058ca?tpId=13&tqId= ...

  8. [Charles]SSLHandshake: Received fatal alert: certificate_unknown

    ---------------------- 转载请注明出处 http://www.cnblogs.com/dzblog/p/8119712.html --------------------- 今天 ...

  9. 用dos命令导出一个文件夹里面所有文件的名字(装逼利器)

    首先,当然是在相关的文件夹打开dos命令窗口. 然后,输入如下命令:dir/b >a.txt 如果你非常了解dos命令,那么你一定会觉得这个东西简单到爆,而且我的理解和猜想都有些无知. 但如果你 ...

  10. Web API 处理机制剖析 --- 拨开迷雾看本质

     前言 最近开发了几个项目,用到了web api,也通过项目加深了对web api的理解.本文试图从内部原理讲解web api的本质.透过重重迷雾,看清本质,就能更好的把握和利用好web api. 1 ...