编程 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 中 null、NaN和undefined的区别总结

Apr 10 Javascript

Ajax提交与传统表单提交的区别说明

Feb 07 Javascript

通过隐藏iframe实现文件下载的js方法介绍

Feb 26 Javascript

Jquery 在页面加载后执行的几种方式

Mar 14 Javascript

js实现window.open不被拦截的解决方法汇总

Oct 30 Javascript

javascript中caller和callee详解

Aug 10 Javascript

Javascript获取数组中的最大值和最小值的方法汇总

Jan 01 Javascript

jQuery菜单实例(全选,反选,取消)

Aug 28 jQuery

薪资那么高的Web前端必看书单

Oct 13 Javascript

JavaScript调用模式与this关键字绑定的关系

Apr 21 Javascript

微信小程序支付功能 php后台对接完整代码分享

Jun 12 Javascript

一起来了解一下JavaScript的预编译(小结)

Mar 01 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

新安装的MySQL数据库需要注意的安全知识

2008/07/30 PHP

Laravel 5.3 学习笔记之安装

2016/08/28 PHP

PHP7常量数组用法分析

2016/09/26 PHP

php实现将数据做成json的格式给前端使用

2018/08/21 PHP

防止网站内容被拷贝的一些方法与优缺点好处与坏处分析

2007/11/30 Javascript

jquery插件如何使用 jQuery操作Cookie插件使用介绍

2012/12/15 Javascript

Js动态添加复选框Checkbox的实例方法

2013/04/08 Javascript

Javascript简单实现面向对象编程继承实例代码

2015/11/27 Javascript

下雪了 javascript实现雪花飞舞

2020/08/02 Javascript

利用AJAX实现WordPress中的文章列表及评论的分页功能

2016/05/17 Javascript

微信小程序空白页重定向解决办法

2017/06/27 Javascript

轻松搞定jQuery+JSONP跨域请求的解决方案

2018/03/06 jQuery

Vue不能检测到Object/Array更新的情况的解决

2018/06/26 Javascript

微信小程序仿抖音视频之整屏上下切换功能的实现代码

2020/05/24 Javascript

解决vue项目运行npm run serve报错的问题

2020/10/26 Javascript

举例讲解Python设计模式编程的代理模式与抽象工厂模式

2016/01/16 Python

Python何时应该使用Lambda函数

2019/07/02 Python

Python 使用matplotlib模块模拟掷骰子

2019/08/08 Python

python requests库爬取豆瓣电视剧数据并保存到本地详解

2019/08/10 Python

python 利用pywifi模块实现连接网络破解wifi密码实时监控网络

2019/09/16 Python

Python:合并两个numpy矩阵的实现

2019/12/02 Python

Python三维绘图之Matplotlib库的使用方法

2020/09/20 Python

python如何实现word批量转HTML

2020/09/30 Python

matplotlib更改窗口图标的方法示例

2021/02/03 Python

matplotlib相关系统目录获取方式小结

2021/02/03 Python

威盛公司软件C++工程师笔试题面试题

2012/07/16 面试题

幼儿园长自我鉴定

2013/10/17 职场文书

善意的谎言事例

2014/02/15 职场文书

一句话工作感言

2014/03/01 职场文书

公司开会通知

2015/04/20 职场文书

运动会1000米加油稿

2015/07/21 职场文书

Python如何把不同类型数据的json序列化

2021/04/30 Python

使用@Value值注入及配置文件组件扫描

2021/07/09 Java/Android

python入门学习关于for else的特殊特性讲解

2021/11/20 Python

Centos7 Shell编程之正则表达式、文本处理工具详解

2022/08/05 Servers

Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)

2022/08/14 数码科技