雪花动画效果-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            background-repeat: no-repeat;
            background-position: center 0;
            background-color: #000;
            background-image: url(../images/a.jpg);
        }
        .snowbg{width:1000px;height:600px;clear:both;margin:0 auto;position:relative;overflow:hidden;}
        .snow{position:absolute;top:0;color:#fff;}
    </style>
</head>
<body>
    <div class="snowbg">

    </div>
</body>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    var imgs=['../images/flutter1.png','../images/flutter2.png','../images/flutter3.png','../images/flutter4.png','../images/flutter5.png','../images/flutter6.png'];
    $(function () {
        var timer=setInterval(function () {
            var i=Math.floor(Math.random()*6);
            var d='<div class="snow"><img src="'+imgs[i]+'" alt=""></div>';
            var speed=Math.random()*4000;
            $(d).clone().appendTo($('.snowbg')).css({
                left:Math.random()*$(window).width(),
                top:'0px'
            }).animate({
                top:'400px',
                opacity:'0.2'
            },speed,'linear',function () {
                $(this).remove()
            });
        },200);
    });
</script>
</html>