编程 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 读后台cookie代码

Sep 15 Javascript

JavaScript 获取当前时间戳的代码

Aug 05 Javascript

js将控件隐藏的方法及display属性介绍

Jul 04 Javascript

javascript中的toFixed固定小数位数简单实例分享

Jul 12 Javascript

原生js实现autocomplete插件

Apr 14 Javascript

JavaScript中用let语句声明作用域的用法讲解

May 20 Javascript

JS正则表达式验证中文字符

May 08 Javascript

微信小程序之GET请求的实例详解

Sep 29 Javascript

ES6中let 和 const 的新特性

Sep 03 Javascript

element-ui的回调函数Events的用法详解

Oct 16 Javascript

vue项目中全局引入1个.scss文件的问题解决

Aug 01 Javascript

javascript canvas时钟模拟器

Jul 13 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/04 PHP

PHP 文件编程综合案例-文件上传的实现

2013/07/03 PHP

smarty简单应用实例

2015/11/03 PHP

THinkPHP获取客户端IP与IP地址查询的方法

2016/11/14 PHP

用Greasemonkey 脚本收藏网站会员信息到本地

2009/10/26 Javascript

JS getStyle获取最终样式函数代码

2010/04/01 Javascript

初窥JQuery(二)事件机制(2)

2010/12/06 Javascript

JavaScript编程的10个实用小技巧

2014/04/18 Javascript

js简单抽奖代码

2015/01/16 Javascript

JavaScript判断前缀、后缀是否是空格的方法

2015/04/15 Javascript

JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果

2015/10/14 Javascript

jquery 判断selection range 是否在容器中的简单实例

2016/08/02 Javascript

AngularJS使用ng-options指令实现下拉框

2016/08/23 Javascript

jQuery实现鼠标悬停3d菜单展开动画效果

2017/01/19 Javascript

boostrapTable的refresh和refreshOptions区别浅析

2017/01/22 Javascript

node.js+jQuery实现用户登录注册AJAX交互

2017/04/28 jQuery

js获取css的各种样式并且设置他们的方法

2017/08/22 Javascript

分析JS单线程异步io回调的特性

2017/12/01 Javascript

Vue响应式原理深入解析及注意事项

2017/12/11 Javascript

webuploader实现上传图片到服务器功能

2018/08/16 Javascript

webpack4.x下babel的安装、配置及使用详解

2019/03/07 Javascript

公众号SVG动画交互实战代码

2020/05/31 Javascript

vue实现可移动的悬浮按钮

2021/03/04 Vue.js

[02:12]2015国际邀请赛 SHOWOPEN

2015/08/05 DOTA

python实现根据ip地址反向查找主机名称的方法

2015/04/29 Python

Python判断直线和矩形是否相交的方法

2015/07/14 Python

Python基本语法经典教程

2016/03/11 Python

Python实现读取字符串按列分配后按行输出示例

2018/04/17 Python

python 爬虫之selenium可视化爬虫的实现

2020/12/04 Python

英国标志性奢侈品牌：Burberry

2016/07/28 全球购物

波比布朗英国官网：Bobbi Brown英国

2017/11/13 全球购物

JAVA软件工程师测试题

2014/07/25 面试题

医学专业个人求职自荐信格式

2013/09/23 职场文书

求职简历自荐信范文

2013/10/21 职场文书

毕业生大学生活自我总结

2014/01/31 职场文书

销售内勤岗位职责

2014/04/15 职场文书