« 上一篇下一篇 »

html雪花飘落

 

偌,什么也不说了,直接上代码,小伙伴可以点击”运行“按钮,测试一下效果哦

CSS
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<title>雪花飘落</title>
<style>
body{background:#000;background: url(http://www.jxteacher.com/userfiles/qncym20111206/images/%C8%AB%C4%CF%CF%D8%D2%B9%BE%B06.jpg) no-repeat center 0 #000;}.snowbg{width:1000px;height:600px;clear:both;margin:0 auto;position:relative;overflow:hidden;}.snow{position:absolute;top:0;color:#fff;}</style>
<script>
$(function(){
  var d="<div class='snow'>❅<div>"
			setInterval(function(){
				var f=$(document).width();
				var e=Math.random()*f-100;
				var o=0.3+Math.random();
				var fon=10+Math.random()*30;
				var l = e - 100 + 200 * Math.random();
				var k=2000 + 5000 * Math.random();
				$(d).clone().appendTo(".snowbg").css({
					left:e+"px",					opacity:o,					"font-size":fon,				}).animate({
				  top:"400px",					left:l+"px",					opacity:0.1,				},k,"linear",function(){$(this).remove()})
			},200)})</script>
  </head>
<body >
<div class="snowbg">
</div>
</body>
</html>

运行效果图:

html雪花飘落-王杭个人博客

温馨提示:文章内容仅代表作者个人观点,不代表初橙博客赞同其观点和对其真实性负责!
版权声明:本站部分为转载文章,来源于网络 ,版权归原作者所有,欢迎分享本文,如原作者不同意转载请邮箱联系站长处理!
转载申明:本站文章,欢迎转载。但转载时请保留原文地址。
原文地址:http://www.gxuan.cc/post/43.html
分享到: