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

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. Python学习笔记【第十一篇】：Python面向对象高级

    isinstance(obj,cls)和issubclass(sub,super) class Person(object): def __init__(self, name, age, sex, n ...

  2. H5中用js让页面全屏

    概述 意外的发现一个网页有一个按钮能使网页全屏,查了下代码发现是H5的全屏api,于是就查了下资料,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: 利用js如何做到让页面全屏和不全屏功能 ...

  3. Metasploit Framework（6）客户端渗透（上）

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 前五篇文章讲解了Metasploit Framewor ...

  4. [Postman]拦截器扩展(15)

    什么是拦截器 注意: Interceptor功能仅在我们的Postman Chrome应用程序中受支持,目前在Postman桌面应用程序中不可用.如果您希望我们的桌面应用程序中提供此功能,请在此处告知 ...

  5. Spark基础-scala学习（八、隐式转换与隐式参数）

    大纲 隐式转换 使用隐式转换加强现有类型 导入隐式转换函数 隐式转换的发生时机 隐式参数 隐式转换 要实现隐式转换,只要程序可见的范围内定义隐式转换函数即可.Scala会自动使用隐式转换函数.隐式转换 ...

  6. python 输入一个字符串，打印出它所有的组合

    import itertools str = input('请输入一个字符串:') lst = [] for i in range(1, len(str)+1): lst1 = [''.join(x) ...

  7. 电商门户网站商品品类多级联动SpringBoot+Thymeleaf实现

    在淘宝.京东等电商网站,其门户网站都有一个商品品类的多级联动,鼠标移动,就显示,因为前端不是我做的,所以不说明前端实现,只介绍后端实现. 搭建部署SpringBoot环境 配置文件配置: 开启了对Th ...

  8. C++常见笔试题

    1.实现字符串转整数的函数:int atoi(const char *nptr) 2.实现数组折半查找:int BinarySearch(int a[],int len, int key) 3.实现字 ...

  9. 多线程编程学习笔记——使用异步IO

    接上文 多线程编程学习笔记——使用并发集合(一) 接上文 多线程编程学习笔记——使用并发集合(二) 接上文 多线程编程学习笔记——使用并发集合(三) 假设以下场景,如果在客户端运行程序,最的事情之一是 ...

  10. 解决 VS2017 打断点无效

    打断点无效 断点显示白色,鼠标移上去,提示:The breakpoint will not currently be hit. No Symbols have been loaded for this ...