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

使用jscript实现二进制读写脚本代码

Jun 09 Javascript

ie和firefox不兼容的解决方法集合

Apr 28 Javascript

利用jQuery接受和处理xml数据的代码(.net)

Mar 28 Javascript

jquery中的常用事件bind、hover、toggle等示例介绍

Jul 21 Javascript

jQuery实现手机号码输入提示功能实例

Apr 30 Javascript

jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法

Aug 08 Javascript

JavaScript DOM节点操作实例小结(新建,删除HTML元素)

Jan 19 Javascript

Angularjs在360兼容模式下取数据缓存问题的解决办法

Jun 22 Javascript

js判断输入框不能为空格或null值的实现方法

Mar 02 Javascript

移动端滑动切换组件封装 vue-swiper-router实例详解

Nov 25 Javascript

vue2.0中set添加属性后视图不能更新的解决办法

Feb 22 Javascript

jquery图片预览插件实现方法详解

Jul 18 jQuery

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

咖啡知识大全

2021/03/03 新手入门

swfupload 多文件上传实现代码

2008/08/27 PHP

PHP英文字母大小写转换函数小结

2014/05/03 PHP

PHP大文件分片上传的实现方法

2018/10/28 PHP

解决laravel id非自增模型取回为0 的问题

2019/10/11 PHP

Laravel 之url参数,获取路由参数的例子

2019/10/21 PHP

TP5多入口设置实例讲解

2020/12/15 PHP

JQuery小知识

2010/10/15 Javascript

js使用函数绑定技术改变事件处理程序的作用域

2011/12/26 Javascript

自己写的Javascript计算时间差函数

2013/10/28 Javascript

jquery-tips悬浮提示插件分享

2015/07/31 Javascript

JavaScript的History API使搜索引擎抓取AJAX内容

2015/12/07 Javascript

node.js中的事件处理机制详解

2016/11/26 Javascript

JavaScript 中对象的深拷贝

2016/12/04 Javascript

详解node.js平台下Express的session与cookie模块包的配置

2017/04/26 Javascript

react-native DatePicker日期选择组件的实现代码

2017/09/12 Javascript

微信小程序自定义prompt组件步骤详解

2018/06/12 Javascript

koa socket即时通讯的示例代码

2018/09/07 Javascript

如何检查一个对象是否为空

2019/04/11 Javascript

详解vue项目中实现图片裁剪功能

2019/06/07 Javascript

Python实现Const详解

2015/01/27 Python

matplotlib中legend位置调整解析

2017/12/19 Python

python3.6.3+opencv3.3.0实现动态人脸捕获

2018/05/25 Python

python画折线图的程序

2018/07/26 Python

python Pandas库基础分析之时间序列的处理详解

2019/07/13 Python

Python函数的定义方式与函数参数问题实例分析

2019/12/26 Python

解决pycharm中的run和debug失效无法点击运行

2020/06/09 Python

python利用faker库批量生成测试数据

2020/10/15 Python

StubHub巴西：购买和出售您的门票

2016/07/22 全球购物

白宫黑市官网：White House Black Market

2016/11/17 全球购物

Java基础知识面试题

2014/03/25 面试题

大学生入党思想汇报

2014/01/01 职场文书

班子个人四风问题整改措施

2014/10/04 职场文书

2015年药品销售工作总结范文

2015/05/25 职场文书

财务会计个人原因辞职信

2019/06/21 职场文书

pytorch分类模型绘制混淆矩阵以及可视化详解

2022/04/07 Python