编程 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 相关文章推荐

javascript操作表格排序实例分析

May 06 Javascript

基于jquery实现图片上传本地预览功能

Jan 08 Javascript

创建一个类Person的简单实例

May 17 Javascript

AngularJS过滤器详解及示例代码

Aug 16 Javascript

JS正则截取两个字符串之间及字符串前后内容的方法

Jan 06 Javascript

vue 2.0组件与v-model详解

Mar 27 Javascript

微信小程序图片选择、上传到服务器、预览（PHP）实现实例

May 11 Javascript

Angular 2父子组件数据传递之@Input和@Output详解 (上)

Jul 05 Javascript

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

Oct 19 jQuery

JS手机端touch事件计算滑动距离的方法示例

Oct 26 Javascript

详解使用mpvue开发github小程序总结

Jul 25 Javascript

利用Angular2的Observables实现交互控制的方法

Dec 27 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实现根据词频生成tag云的方法

2015/04/17 PHP

TP5框架实现签到功能的方法分析

2020/04/05 PHP

Track Image Loading效果代码分析

2007/08/13 Javascript

Jquery实现的一种常用高亮效果示例代码

2014/01/28 Javascript

NodeJS Web应用监听sock文件实例

2015/02/18 NodeJs

js获取页面引用的css样式表中的属性值方法(推荐)

2016/08/19 Javascript

JavaScript实现图像模糊化的方法实例

2017/01/15 Javascript

深入理解javascript中的 “this”

2017/01/17 Javascript

浅谈Vue.nextTick 的实现方法

2017/10/25 Javascript

Node.js log4js日志管理详解

2018/07/31 Javascript

Vue-cli@3.0 插件系统简析

2018/09/05 Javascript

如何解决js函数防抖、节流出现的问题

2019/06/17 Javascript

layer 刷新某个页面的实现方法

2019/09/05 Javascript

Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码

2020/08/27 Javascript

python调用cmd命令行制作刷博器

2014/01/13 Python

使用python调用浏览器并打开一个网址的例子

2014/06/05 Python

Python开发如何在ubuntu 15.10 上配置vim

2016/01/25 Python

Flask 让jsonify返回的json串支持中文显示的方法

2018/03/26 Python

python求质数的3种方法

2018/09/28 Python

python简易实现任意位数的水仙花实例

2018/11/13 Python

python 解决pycharm运行py文件只有unittest选项的问题

2020/09/01 Python

Python获取指定网段正在使用的IP

2020/12/14 Python

英国顶级珠宝品牌之家：John Greed

2018/06/09 全球购物

仓管员岗位职责范文

2013/11/08 职场文书

新闻学毕业生自荐信

2013/11/15 职场文书

体育教育个人自荐信范文

2013/12/01 职场文书

高三生物教学反思

2014/01/25 职场文书

行政工作个人的自我评价

2014/02/13 职场文书

我爱我家教学反思

2014/05/01 职场文书

毕业生求职信

2014/06/10 职场文书

2015年毕业生实习评语

2015/03/25 职场文书

2015年事业单位办公室文员工作总结

2015/04/24 职场文书

三八妇女节新闻稿

2015/07/17 职场文书

Java Socket实现Redis客户端的详细说明

2021/05/26 Redis

CSS实现章节添加自增序号的方法

2021/06/23 HTML / CSS

nginx 配置指令之location使用详解

2022/05/25 Servers