jQuery+CSS3实现树叶飘落特效

前端技术 2023/09/01 JavaScript

请使用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>

非常适合个人主页或者博客的一个特效，喜欢此特效的小伙伴直接拿走吧，自由扩展下也可以哦。

本文地址：https://www.stayed.cn/item/2614

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案