实现雪花飘落效果

Original 2016-11-03 14:01:05 726
abstract:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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.wallcoo.com/holiday/Christmas%20Night%20at%20Disneyland/wallpapers/1280x800/Disneyland%20Sleeping%20Beauty%20Castle%20at%20night.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>


Release Notes

Popular Entries