编程 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中各浏览器中鼠标按键值的差异

Apr 07 Javascript

在jquery中combobox多选的不兼容问题总结

Dec 24 Javascript

javascript实现页面刷新时自动清空表单并选中的方法

Jul 18 Javascript

Bootstrap教程JS插件滚动监听学习笔记分享

May 18 Javascript

微信小程序前端源码逻辑和工作流详解

Oct 08 Javascript

JavaScript中动态向表格添加数据

Jan 24 Javascript

vue+Element实现搜索关键字高亮功能

May 28 Javascript

js中let能否完全替代IIFE

Jun 15 Javascript

使用Vue.js中的过滤器实现幂方求值的方法

Aug 27 Javascript

javascript实现简易的计算器

Jan 17 Javascript

Vue 3.0中jsx语法的使用

Nov 13 Javascript

SpringBoot在yml配置文件中配置druid的操作

Nov 16 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_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法

2014/05/04 PHP

php实现微信公众平台账号自定义菜单类

2014/12/02 PHP

THINKPHP在添加数据的时候获取主键id的值方法

2017/04/03 PHP

用JavaScript编写COM组件的步骤

2009/03/17 Javascript

jQuery AnythingSlider滑动效果插件

2010/02/07 Javascript

基于jQuery的投票系统显示结果插件

2011/08/12 Javascript

一个JavaScript变量声明的知识点

2013/10/28 Javascript

JS清空多文本框、文本域示例代码

2014/02/24 Javascript

JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

2015/01/13 Javascript

jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)

2016/05/10 Javascript

jQuery插件版本冲突的处理方法分析

2017/01/16 Javascript

原生js实现无限循环轮播图效果

2017/01/20 Javascript

Vue中父组件向子组件通信的方法

2017/07/11 Javascript

layui-laydate时间日历控件使用方法详解

2018/11/15 Javascript

vue+element实现打印页面功能

2019/05/20 Javascript

kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.

2019/09/17 Javascript

Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩）

2019/10/23 Javascript

vue如何使用外部特殊字体的操作

2020/07/30 Javascript

[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片

2014/12/01 DOTA

用Python和MD5实现网站挂马检测程序

2014/03/13 Python

Python科学计算之Pandas详解

2017/01/15 Python

Sanic框架Cookies操作示例

2018/07/17 Python

详解Numpy中的广播原则/机制

2018/09/20 Python

详解python中递归函数

2019/04/16 Python

浅谈Python type的使用

2019/11/19 Python

Python3中configparser模块读写ini文件并解析配置的用法详解

2020/02/18 Python

阿拉伯世界最大的电子卖场：Souq埃及

2016/08/01 全球购物

全球性的在线购物网站：Zapals

2017/03/22 全球购物

采购主管岗位职责

2014/02/01 职场文书

中学生演讲稿

2014/04/26 职场文书

党员自我剖析材料（群众路线）

2014/10/06 职场文书

2014年房产经纪人工作总结

2014/12/08 职场文书

2015年市场营销工作总结

2015/07/23 职场文书

2016年员工年度考核评语

2015/12/02 职场文书

2019职场实习报告该怎么写？

2019/07/01 职场文书

MySQL脏读,幻读和不可重复读

2022/05/11 MySQL