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>

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

Javascript 相关文章推荐
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
JavaScript作用域链实例详解
Jan 21 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
原生JS实现留言板
Mar 26 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 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/08/05 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
详解在vue-cli项目中使用mockjs(请求数据删除数据)
2017/10/23 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python标准库内置函数complex介绍
2014/11/25 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python实现两个文件合并功能
2018/04/01 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
python3图片文件批量重命名处理
2019/10/31 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
女大学生个人求职信
2013/12/09 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
个人违纪检讨书
2014/09/15 职场文书
2014年残联工作总结
2014/11/21 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书