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

jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

Nov 21 Javascript

从URL中提取参数与将对象转换为URL查询参数的实现代码

Jan 12 Javascript

jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码

Jan 23 Javascript

图片无缝滚动代码(向左/向下/向上)

Apr 10 Javascript

jquery自定义属性(类型/属性值)

May 21 Javascript

多个datatable共存造成多个表格的checkbox都被选中

Jul 11 Javascript

JavaScript实现简单图片翻转的方法

Apr 17 Javascript

jQuery通过改变input的type属性实现密码显示隐藏切换功能

Feb 08 Javascript

详解node child_process模块学习笔记

Jan 24 Javascript

vue如何在自定义组件中使用v-model

May 14 Javascript

使用validate.js实现表单数据提交前的验证方法

Sep 04 Javascript

浅谈Vue.set实际上是什么

Oct 17 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语句将数据库*.sql文件导入数据库

2014/05/05 PHP

迪菲－赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版

2015/05/12 PHP

关于php几种字符串连接的效率比较(详解)

2017/02/22 PHP

php测试kafka项目示例

2020/02/06 PHP

js之WEB开发调试利器:Firebug 下载

2007/01/13 Javascript

checkbox使用示例

2013/08/23 Javascript

用js通过url传参把数据从一个页面传到另一个页面

2014/09/01 Javascript

jQuery提示效果代码分享

2014/11/20 Javascript

JavaScript基础教程——入门必看篇

2016/05/20 Javascript

AngularJs实现分页功能不带省略号的代码

2016/05/30 Javascript

Bootstrap三种表单布局的使用方法

2016/06/21 Javascript

JS获取随机数和时间转换的简单实例

2016/07/10 Javascript

vue2.0+vue-dplayer实现hls播放的示例

2018/03/02 Javascript

基于Nodejs的Tcp封包和解包的理解

2018/09/19 NodeJs

node版本管理工具n包使用教程详解

2018/11/09 Javascript

详解js动态获取浏览器或页面等容器的宽高

2019/03/13 Javascript

详解async/await 异步应用的常用场景

2019/05/13 Javascript

JS实现的字符串数组去重功能小结

2019/06/17 Javascript

基于vue、react实现倒计时效果

2019/08/26 Javascript

vue遍历对象中的数组取值示例

2019/11/07 Javascript

JS数组及对象遍历方法代码汇总

2020/06/16 Javascript

[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2

2018/06/03 DOTA

python实现下载文件的三种方法

2017/02/09 Python

Python基于ThreadingTCPServer创建多线程代理的方法示例

2018/01/11 Python

python flask实现分页的示例代码

2018/08/02 Python

使用python3构建文件传输的方法

2019/02/13 Python

Python 的字典（Dict）是如何存储的

2019/07/05 Python

python3实现将json对象存入Redis以及数据的导入导出

2020/07/16 Python

详解scrapy内置中间件的顺序

2020/09/28 Python

大学生自我鉴定

2013/12/16 职场文书

科技开发中心办公室主任岗位责任制

2014/02/10 职场文书

民主评议党员总结

2014/10/20 职场文书

申报优秀教师材料

2014/12/16 职场文书

仓库保管员岗位职责

2015/02/09 职场文书

国富论读书笔记

2015/06/26 职场文书

详解CSS中的特指度和层叠问题

2021/07/15 HTML / CSS