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

js闭包的用途详解

Nov 09 Javascript

jQuery中outerHeight()方法用法实例

Jan 19 Javascript

Bootstrap每天必学之标签与徽章

Nov 27 Javascript

Webwork 实现文件上传下载代码详解

Feb 02 Javascript

js中变量的连续赋值(实例讲解)

Jul 08 Javascript

es6中的解构赋值、扩展运算符和rest参数使用详解

Sep 28 Javascript

200行代码实现blockchain 区块链实例详解

Mar 14 Javascript

浅谈webpack 自动刷新与解析

Apr 09 Javascript

总结javascript三元运算符知识点

Sep 28 Javascript

ant design中upload组件上传大文件,显示进度条进度的实例

Oct 29 Javascript

在vue中嵌入外部网站的实现

Nov 13 Javascript

JavaScript实现HTML导航栏下拉菜单

Nov 25 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读取本地文件常用函数(fopen与file_get_contents)

2013/09/09 PHP

学习php设计模式 php实现抽象工厂模式

2015/12/07 PHP

PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间

2016/05/06 PHP

PHP7创建销毁session的实例方法

2020/02/03 PHP

PHP开发API接口签名生成及验证操作示例

2020/05/27 PHP

Jquery Ajax学习实例6 向WebService发出请求，返回DataSet(XML) 异步调用

2010/03/18 Javascript

jquery ajax jsonp跨域调用实例代码

2013/12/11 Javascript

jquery ajax 局部无刷新更新数据的实现案例

2014/02/08 Javascript

AngularJS基础知识

2014/12/21 Javascript

AspNet中使用JQuery boxy插件的确认框

2015/05/20 Javascript

jQuery解析json格式数据简单实例

2016/01/22 Javascript

JavaScript实现字符串与日期的互相转换及日期的格式化

2016/03/07 Javascript

关于jQuery中fade(),show()起始位置的一点小发现

2017/04/25 jQuery

nodejs制作爬虫实现批量下载图片

2017/05/19 NodeJs

JS的Ajax与后端交互数据的实例

2018/08/08 Javascript

Vue动态路由缓存不相互影响的解决办法

2019/02/19 Javascript

解决vue-router路由拦截造成死循环问题

2020/08/05 Javascript

Vue 列表页带参数进详情页的操作(router-link)

2020/11/13 Javascript

[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15

2019/08/17 DOTA

Python中用于计算对数的log()方法

2015/05/15 Python

在CMD命令行中运行python脚本的方法

2018/05/12 Python

浅析python redis的连接及相关操作

2019/11/07 Python

Python3自定义http/https请求拦截mitmproxy脚本实例

2020/05/11 Python

CSS3教程(3):border-color网页边框色彩

2009/04/02 HTML / CSS

关于css中margin的值和垂直外边距重叠问题

2020/10/27 HTML / CSS

详解通过focusout事件解决IOS键盘收起时界面不归位的问题

2019/07/18 HTML / CSS

男女时尚与复古风格在线购物：RoseGal（全球免费送货）

2017/07/19 全球购物

Swisse官方海外旗舰店：澳大利亚销量领先，自然健康品牌

2017/12/15 全球购物

摩托车和ATV零件、配件和服装的首选在线零售商：MotoSport

2017/12/22 全球购物

判断单链表中是否存在环

2012/07/16 面试题

商务英语毕业生自荐信范文

2013/11/08 职场文书

植树造林的宣传标语

2014/06/23 职场文书

2014年幼儿园安全工作总结

2014/11/10 职场文书

万能检讨书

2015/01/27 职场文书

分析MySQL抛出异常的几种常见解决方式

2021/05/18 MySQL

Python内置的数据类型及使用方法

2022/04/13 Python