编程 Javascript

jQuery+CSS3实现树叶飘落特效

Posted in Javascript onFebruary 01, 2015

请使用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">

请使用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>

非常适合个人主页或者博客的一个特效，喜欢此特效的小伙伴直接拿走吧，自由扩展下也可以哦。

jQuery+CSS3实现树叶飘落特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

不错的新闻标题颜色效果

Dec 10 Javascript

jQuery判断对象是否存在的方法

Feb 05 Javascript

js+HTML5实现视频截图的方法

Jun 16 Javascript

JS实现的Select三级下拉菜单代码

Aug 20 Javascript

跟我学习javascript的undefined与null

Nov 17 Javascript

jQuery实现Select左右复制移动内容

Aug 05 Javascript

JS实现倒计时(天数、时、分、秒)

Nov 16 Javascript

jQuery实现弹出窗口弹出div层的实例代码

Jan 09 Javascript

JavaScript获取中英文混合字符串长度的方法示例

Feb 04 Javascript

node.js基于socket.io快速实现一个实时通讯应用

Apr 23 Javascript

JS中this的4种绑定规则详解

Feb 04 Javascript

记一次react前端项目打包优化的方法

Mar 30 Javascript

jquery实现勾选复选框触发事件给input赋值

Feb 01 #Javascript

jQuery结合HTML5制作的爱心树表白动画

Feb 01 #Javascript

jquery实现炫酷的叠加层自动切换特效

Feb 01 #Javascript

JavaScript插件化开发教程（六）

Feb 01 #Javascript

JavaScript插件化开发教程（五）

Feb 01 #Javascript

对JavaScript中this指针的新理解分享

Jan 31 #Javascript

IE下支持文本框和密码框placeholder效果的JQuery插件分享

Jan 31 #Javascript

You might like

PHP获取类中常量，属性，及方法列表的方法

2009/04/09 PHP

phpmyadmin导入(import)文件限制的解决办法

2009/12/11 PHP

php设计模式 Observer(观察者模式)

2011/06/26 PHP

php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法

2014/11/11 PHP

bootstrap3 兼容IE8浏览器！

2016/05/02 Javascript

利用jQuery.Validate异步验证用户名是否存在（推荐）

2016/12/09 Javascript

JS中input表单隐藏域及其使用方法

2017/02/13 Javascript

jQuery实现验证码功能

2017/03/17 Javascript

React-router中结合webpack实现按需加载实例

2017/05/25 Javascript

Vue中的组件及路由使用实例代码详解

2019/05/22 Javascript

通过jQuery学习js类型判断的技巧

2019/05/27 jQuery

详解javascript中var与ES6规范中let、const区别与用法

2020/01/11 Javascript

微信小程序修改checkbox的样式代码实例

2020/01/21 Javascript

javascript设计模式之迭代器模式

2020/01/30 Javascript

使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法

2020/05/14 Javascript

JavaScript中的函数式编程详解

2020/08/22 Javascript

Nodejs在局域网配置https访问的实现方法

2020/10/17 NodeJs

[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

Python for循环生成列表的实例

2018/06/15 Python

python+splinter实现12306网站刷票并自动购票流程

2018/09/25 Python

pandas read_excel()和to_excel()函数解析

2019/09/19 Python

Python 3.8正式发布重要新功能一览

2019/10/17 Python

怎样实现H5+CSS3手指滑动切换图片的示例代码

2019/05/05 HTML / CSS

诗普兰迪官方网站：Splendid

2018/09/18 全球购物

澳大利亚礼品卡商店：Gift Card Store

2019/06/24 全球购物

戴尔荷兰官方网站：Dell荷兰

2020/10/04 全球购物

作弊检讨书1000字

2014/02/01 职场文书

班班通项目实施方案

2014/02/25 职场文书

优秀共产党员先进事迹材料

2014/05/06 职场文书

区级文明单位申报材料

2014/05/15 职场文书

上课睡觉万能检讨书

2015/02/17 职场文书

校园文化艺术节开幕词

2016/03/04 职场文书

2016年大学生社区服务活动总结

2016/04/06 职场文书

使用Python脚本对GiteePages进行一键部署的使用说明

2021/05/27 Python

Vue CLI中模式与环境变量的深入详解

2021/05/30 Vue.js

Nginx动静分离配置实现与说明

2022/04/07 Servers