编程 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中判断控件是否存在

Aug 25 Javascript

javascript学习笔记(二) js一些基本概念

Jun 18 Javascript

JS 弹出层定位至屏幕居中示例

May 21 Javascript

jQuery中clearQueue()方法用法实例

Dec 29 Javascript

js获取当前日期前七天的方法

Feb 28 Javascript

使用jQuery获取data-的自定义属性

Nov 10 Javascript

用canvas 实现个图片三角化（LOW POLY）效果

Feb 18 Javascript

从零学习node.js之模块规范（一）

Feb 21 Javascript

详解Vue + Vuex 如何使用 vm.$nextTick

Nov 20 Javascript

vue2.0 + element UI 中 el-table 数据导出Excel的方法

Mar 02 Javascript

vsCode安装使用教程和插件安装方法

Aug 24 Javascript

js实现筛选功能

Nov 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新手上路（十一）

2006/10/09 PHP

php结合飞信免费天气预报短信

2009/05/07 PHP

php实现二进制和文本相互转换的方法

2015/04/18 PHP

smarty模板判断数组为空的方法

2015/06/10 PHP

php车辆违章查询数据示例

2016/10/14 PHP

javascript 获取页面的高度及滚动条的位置的代码

2010/05/06 Javascript

深入理解JavaScript系列(6)：S.O.L.I.D五大原则之单一职责SRP

2012/01/15 Javascript

javaScript 动态访问JSon元素示例代码

2013/08/30 Javascript

JavaScript的原型继承详解

2015/02/15 Javascript

JavaScript中的splice()方法使用详解

2015/06/09 Javascript

简单谈谈node.js 版本控制 nvm和 n

2015/10/15 Javascript

JS实现简单的右下角弹出提示窗口完整实例

2016/06/21 Javascript

学习使用bootstrap的modal和carousel

2016/12/09 Javascript

Bootstrap 3 按钮标签实例代码

2017/02/21 Javascript

在node.js中怎么屏蔽掉favicon.ico的请求

2017/03/01 Javascript

vux uploader 图片上传组件的安装使用方法

2018/05/15 Javascript

vue中的计算属性实例详解

2018/09/19 Javascript

vue输入节流,避免实时请求接口的实例代码

2019/10/30 Javascript

javascript使用正则表达式实现注册登入校验

2020/09/23 Javascript

[02:15]2015国际邀请赛选手档案IG.Ferrari 430

2015/07/30 DOTA

python使用PyGame模块播放声音的方法

2015/05/20 Python

解决python 未发现数据源名称并且未指定默认驱动程序的问题

2018/12/07 Python

python 用下标截取字符串的实例

2018/12/25 Python

python 返回一个列表中第二大的数方法

2019/07/09 Python

python将邻接矩阵输出成图的实现

2019/11/21 Python

python实现单机五子棋

2020/08/28 Python

基于Python实现体育彩票选号器功能代码实例

2020/09/16 Python

Django-silk性能测试工具安装及使用解析

2020/11/28 Python

在vscode中启动conda虚拟环境的思路详解

2020/12/25 Python

中软国际Java程序员机试题

2012/08/19 面试题

生产部主管岗位职责

2014/01/06 职场文书

小学科学教学反思

2014/01/26 职场文书

三好学生演讲稿范文

2014/04/26 职场文书

担保书范本

2015/01/20 职场文书

三方协议书

2015/01/27 职场文书

如何用python清洗文件中的数据

2021/06/18 Python