jQuery+CSS3实现树叶飘落特效

 更新时间:2015年02月01日 10:28:32   投稿:hebedich  
本文给大家分享的是一段使用jQuery+CSS3实现树叶飘落特效的代码,效果非常不错,分享给大家,希望大家能够喜欢

请使用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树插件zTree用法入门教程

    Jquery树插件zTree用法入门教程

    这篇文章主要介绍了Jquery树插件zTree用法入门教程,实例分析了zTree插件的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • jQuery获取多种input值的简单实现方法

    jQuery获取多种input值的简单实现方法

    下面小编就为大家带来一篇jQuery获取多种input值的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jQuery实现放大镜案例

    jQuery实现放大镜案例

    这篇文章主要为大家详细介绍了jQuery实现放大镜案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • jQuery中cookie插件用法实例分析

    jQuery中cookie插件用法实例分析

    这篇文章主要介绍了jQuery中cookie插件用法,结合完整实例形式分析了jQuery针对cookie操作的插件jquery.cookie.js相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • 根据邮箱的域名跳转到相应的登录页面的代码

    根据邮箱的域名跳转到相应的登录页面的代码

    其实主要是想记录一下这种对象的用法,喜欢的朋友可以参考下
    2012-02-02
  • jQuery中last()方法用法实例

    jQuery中last()方法用法实例

    这篇文章主要介绍了jQuery中last()方法用法,实例分析了last()方法获取匹配元素集合中的最后一个元素时的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery插件实现控制网页元素动态居中显示

    jQuery插件实现控制网页元素动态居中显示

    这篇文章主要介绍了jQuery插件实现控制网页元素动态居中显示,实例分析了jQuery插件的实现与元素动态显示的技巧,需要的朋友可以参考下
    2015-03-03
  • JQuery仿小米手机抢购页面倒计时效果

    JQuery仿小米手机抢购页面倒计时效果

    这篇文章主要介绍了JQuery仿小米手机抢购页面倒计时效果,从功能到实现原理以及主要代码都做了详细的介绍,推荐给有相同需求的小伙伴。
    2014-12-12
  • jQuery验证插件validate使用方法详解

    jQuery验证插件validate使用方法详解

    这篇文章主要为大家详细介绍了jQuery验证插件validate使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 轮播的简单实现方法

    轮播的简单实现方法

    下面小编就为大家带来一篇轮播的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论