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 相关文章推荐
在JavaScript中监听IME键盘输入事件
May 29 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
JavaScript 异常处理 详解
Feb 06 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
一次让你了解全部JavaScript的作用域
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使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python实现简单截取中文字符串的方法
2015/06/15 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Django中的ajax请求
2018/10/19 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
贸易经济专业自荐书
2014/06/29 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
python中if和elif的区别介绍
2021/11/07 Python