快捷導(dǎo)航

jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效

更新時(shí)間：2015年02月01日 10:28:32 投稿：hebedich

本文給大家分享的是一段使用jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效的代碼，效果非常不錯(cuò)，分享給大家，希望大家能夠喜歡

請(qǐng)使用Chrome瀏覽器查看本效果。

html源代碼：

<!DOCTYPE HTML>

<html>

<head>

<title>HTML5樹葉飄落動(dòng)畫-柯樂義</title><base target="_blank"  />

<meta charset="utf-8">

<meta name="viewport" content="width=500px, initial-scale=0.64">

<link rel="apple-touch-icon"  />

<!-- The leaves.css file animates the leaves -->

<link rel="stylesheet"  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">

請(qǐng)使用Chrome瀏覽器查看本頁(yè)。

</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>落紅不是無(wú)情物</em>

</div>

</div>

</body>

</html>

非常適合個(gè)人主頁(yè)或者博客的一個(gè)特效，喜歡此特效的小伙伴直接拿走吧，自由擴(kuò)展下也可以哦。

您可能感興趣的文章:

相關(guān)文章

Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例
本篇文章主要是對(duì)Jquery實(shí)現(xiàn)控件的隱藏和顯示實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
jQuery實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)活動(dòng)仿QQ音樂代碼分享
這篇文章主要展示了jQuery實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)活動(dòng)仿QQ音樂實(shí)現(xiàn)代碼，需要的朋友可以參考下
2015-08-08
jQuery如何解決IE輸入框不能輸入的問(wèn)題
在IE10以上版本，微軟為了提高IE輸入框的便利性，增加了文本內(nèi)容全部刪除和密碼眼睛功能，但是有些時(shí)候打開新的頁(yè)面里，輸入框卻被鎖定無(wú)法編輯，需要刷新一下頁(yè)面，或者如果輸入框有內(nèi)容需要點(diǎn)擊一下輸入框后面的叉叉后才能輸入，怎么解決呢，下面小編給大家解答下
2016-10-10
讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)示例
如何想讓頁(yè)面上兩個(gè)div中的滾動(dòng)條(滑塊)同步運(yùn)動(dòng)該怎實(shí)現(xiàn)，具體代碼如下，感興趣的朋友可以參考下
2013-08-08
可以浮動(dòng)某個(gè)物體的jquery控件用法實(shí)例
這篇文章主要介紹了可以浮動(dòng)某個(gè)物體的jquery控件,實(shí)例分析了jquery控件實(shí)現(xiàn)頁(yè)面浮動(dòng)層的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
jQuery 使用手冊(cè)(七)
jQuery 使用手冊(cè)，大家可以耐心的看完，就基本上入門了。
2009-09-09
jquery滾動(dòng)條插件slimScroll使用方法
這篇文章主要為大家詳細(xì)介紹了jquery滾動(dòng)條插件slimScroll的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
easyui combotree加載靜態(tài)數(shù)據(jù)問(wèn)題（選不上）解決方法
這篇文章主要介紹了easyui combotree加載靜態(tài)數(shù)據(jù)問(wèn)題,選不上）
2016-12-12
關(guān)于jquery.validate1.9.0前臺(tái)驗(yàn)證的使用介紹
本篇文章介紹了，關(guān)于jquery.validate1.9.0前臺(tái)驗(yàn)證的使用。需要的朋友參考下
2013-04-04
jQuery模擬物體自由落體運(yùn)動(dòng)(附演示與demo源碼下載)
這篇文章主要介紹了jQuery模擬物體自由落體運(yùn)動(dòng)的方法,并附帶了效果演示與demo源碼下載,可真是模擬出球體自由落體運(yùn)動(dòng)及動(dòng)能損耗的運(yùn)動(dòng)過(guò)程,需要的朋友可以參考下
2016-01-01