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

表单的一些基本用法与技巧

Jul 15 Javascript

让Firefox支持event对象实现代码

Nov 07 Javascript

Javascript JSQL，SQL无处不在，

May 05 Javascript

如何让DIV可编辑、可拖动示例代码

Sep 18 Javascript

js 去除字符串第一位逗号的方法

Jun 07 Javascript

JS实现上下左右对称的九九乘法表

Feb 22 Javascript

jQuery-mobile事件监听与用法详解

Nov 23 Javascript

layer实现弹窗提交信息

Dec 12 Javascript

总结js中的一些兼容性易错的问题

Dec 18 Javascript

Vue项目中ESlint规范示例代码

Jul 04 Javascript

JS桶排序的简单理解与实现方法示例

Nov 25 Javascript

vue.js页面加载执行created,mounted的先后顺序说明

Nov 07 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-redis中文文档介绍

2013/02/07 PHP

PHP7.0安装笔记整理

2015/08/28 PHP

网页禁用右键实现代码（JavaScript代码）

2009/10/29 Javascript

jQuery 表单验证扩展(三)

2010/10/20 Javascript

javascript中的继承实例代码

2011/04/27 Javascript

Javascript中Array.prototype.map()详解

2014/10/22 Javascript

javascript实现简单查找与替换的方法

2015/07/22 Javascript

浅析2种JavaScript继承方式

2015/12/04 Javascript

jquery的ajax提交form表单的两种方法小结(推荐)

2016/05/25 Javascript

js动态获取子复选项并设计全选及提交的实现方法

2016/06/24 Javascript

jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

2016/08/05 Javascript

微信小程序定义全局数据、函数复用、模版等详细介绍

2016/10/27 Javascript

JS中Attr的用法详解

2017/10/09 Javascript

Vue2.0用户权限控制解决方案

2017/11/29 Javascript

JS实现非首屏图片延迟加载的示例

2018/01/06 Javascript

解决Angular.js中使用Swiper插件不能滑动的问题

2018/02/26 Javascript

在vue中获取token,并将token写进header的方法

2018/09/26 Javascript

使用VUE+iView+.Net Core上传图片的方法示例

2019/01/04 Javascript

js使用文件流下载csv文件的实现方法

2019/07/15 Javascript

[42:32]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第二场 10.28

2020/10/28 DOTA

Python使用sax模块解析XML文件示例

2019/04/04 Python

基于python SMTP实现自动发送邮件教程解析

2020/06/02 Python

python 如何快速复制序列

2020/09/07 Python

Django-simple-captcha验证码包使用方法详解

2020/11/28 Python

用python对oracle进行简单性能测试

2020/12/05 Python

HTML5 canvas 基本语法

2009/08/26 HTML / CSS

英国电子专家：maplin

2019/09/04 全球购物

介绍一下代理模式(Proxy)

2014/10/17 面试题

教师实习期自我鉴定

2013/10/06 职场文书

新年主持词

2014/03/27 职场文书

房屋租赁协议书范本

2014/04/10 职场文书

医院节能减排方案

2014/06/13 职场文书

七一建党日演讲稿

2014/09/05 职场文书

火烧圆明园观后感

2015/06/03 职场文书

2015中秋节晚会主持词

2015/07/01 职场文书

Android移动应用开发指南之六种布局详解

2022/09/23 Java/Android