查看效果：http://keleyi.com/keleyi/phtml/css3/15.htm

请使用Chrome浏览器查看本效果。

html源代码：

<!DOCTYPE HTML>

<html>

<head>

<title>HTML5树叶飘落动画-柯乐义</title><base target="_blank" href="http://keleyi.com/keleyi/phtml/css3/" />

<meta charset="utf-8">

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

<link rel="apple-touch-icon" href="http://keleyi.com/keleyi/phtml/css3/15/images/apple-touch-icon.png" />

<!-- The leaves.css file animates the leaves -->

<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/css3/15/leaves.css" type="text/css" media="screen" charset="utf-8">

<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.2.min.js"></script>

<!-- The leaves.js file creates the leaves -->

<script src="http://keleyi.com/keleyi/phtml/css3/15/leaves.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div style="text-align: center; clear: both; margin-top:0px">

<span id="keleyi">

<a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/">

特效库

</a> <a href="http://keleyi.com/a/bjae/h1o76nuh.htm">原文</a> 请使用Chrome浏览器查看本页。

</span>

</div>

<div id="container">

<!-- The container is dynamically populated using the init function in leaves.js -->

<!-- Its dimensions and position are defined using its id selector in leaves.css -->

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

<!-- its appearance, dimensions, and position are defined using its id selector in leaves.css -->

<div id="message">

<em>落红不是无情物</em>

</div>

</div>

</body>

</html>

转载自：http://keleyi.com/a/bjae/h1o76nuh.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

HTML5树叶飘落动画的更多相关文章

  1. HTML5效果：实现树叶飘落

    实现如图所示的东西效果(落叶下落): html代码: <!DOCTYPE html> <html> <head> <title>HTML5树叶飘落动画& ...

  2. 个人网站html5雪花飘落代码JS特效下载

    如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...

  3. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

  4. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

  5. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  6. 6款基于SVG的HTML5应用和动画

    1.HTML5 SVG 3D蝴蝶飞舞动画 逼真超酷 这次我们要分享的这款HTML5动画简直就是逆天,利用SVG制作的3D蝴蝶飞舞动画,蝴蝶飞舞动画非常逼真,蝴蝶飞舞的路线是利用SVG构造的.另外,动画 ...

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

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

  8. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  9. jQuer插件满屏气泡飘落动画效果

    飘落动画效果插件引用: <script src="https://cdn.bootcss.com/JQuery-Snowfall/1.7.4/snowfall.jquery.min.j ...

随机推荐

  1. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...

  2. KnockoutJS 3.X API 第六章 组件(1) 组件和自定义元素 - 概述

    Components (组件)是一个强大的,干净的方式组织您的UI代码,可重复使用的块. : -可以表示单独的控件/窗口小部件或应用程序的整个部分 -包含自己的视图,通常(但可选)自己的视图模型 -可 ...

  3. Design6：选择合适的数据类型

    数据库使用Table来存储海量的数据,细分Table结构,数据最终存储在Table Column中,因此,在设计Table Schema时,必须慎重选择Table Column的Data Type,数 ...

  4. Trace2：创建SQL Trace

    Trace是轻量级的追踪工具,几乎对系统没有任何副作用,开启Trace,经常能够帮助DBA追踪到一些非常有用的信息.Trace出现的比较早,MS推出更强大的Extended Events来取代Trac ...

  5. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  6. javascript 闭包

    闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  7. Eclipse迁移到Android studio步骤如下：

    一.从Eclipse中导出:1.将你的ADT插件版本升级到22.0以上.2.在Eclipse中,选择File-->Export.3.在弹出的导出窗口中,打开Android的文件夹,选择“Gene ...

  8. Oracle之PL/SQL学习笔记

    自己在学习Oracle是做的笔记及实验代码记录,内容挺全的,也挺详细,发篇博文分享给需要的朋友,共有1w多字的学习笔记吧.是以前做的,一直在压箱底,今天拿出来整理了一下,给大家分享,有不足之处还望大家 ...

  9. 纯CSS打造忙碌光标

    我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来 ...

  10. 在IE11下设置SharePoint Server 2013却遇到“需要 Internet Explorer 才能使用此功能。”的解决办法

    就在昨天顺利升级到Windows 8.1 随之IE也升级到了IE11,但是当打开IE11设置SharePoint Server 2013的时候遇到了一些小情况: Figure 1使用Windows 8 ...