圣诞下雪效果

 [JavaScript]代码 

01	jQuery(document).ready(function () {
02	            var snow = {
03	                init:function(l,t){
04	                    this.winW = $(window).width() - 40;
05	                    this.winH = $(window).height();
06	                    this.oSpan;
07	                    this.left = l || ($(window).width() - 530)/2;
08	                    this.top = t || (this.winH - 450) / 2;
09	                    this.position = snow.heart(this.left,this.top,200);
10	                },
11	                heart:function(x,y,v){
12	                    var num = Math.floor(760 / 38);
13	                    var a = v || 100;
14	                    var iX;
15	                    var iY;
16	                    var arr = [];
17	                    //循环输出心形状
18	                    for(var i = -400;i < 360; i++){
19	                        if (i % num == 0) {
20	                            iX = x + a * 1.3;
21	                            iY = y + a * 0.25;
22	                            arr.push({"left":iX - a * (1 - Math.sin(i * Math.PI / 360)) * Math.cos(i * Math.PI / 360) + "px","top":iY - a * (1 - Math.sin(i * Math.PI / 360)) * Math.sin(i * Math.PI / 360) + "px"})
23	                        }
24	                    };
25	                    return arr;
26	                },
27	                randomPos:function(winW){
28	                    return Math.floor(Math.random() * winW);
29	                },
30	                speed:function(n){
31	                    return Math.round(Math.random() * n + 1000);
32	                },
33	                drop: function(obj,index,bol){
34	                    if(bol){
35	                        var ix = this.position[index].left;
36	                        var iy = this.position[index].top;
37	                        obj.animate({
38	                            top: iy,
39	                            left: ix
40	                        },snow.speed(8000));
41	                    }else{
42	                        obj.animate({
43	                            top:this.winH + "px"
44	                        },snow.speed(8000),function(){
45	                            $(this).css({
46	                                top:"-40px"
47	                            });
48	                            snow.drop($(this));
49	                        });
50	                    }
51	                },
52	                render : function(num,callback){
53	                    var winW = $(window).width() - 40;
54	                    var winH = $(window).height();
55	                    var oSpan;
56	                    var str = '';
57	                    var el =  $("body");
58	                    for (var i = 0; i < num; i++) {
59	                        str += '<span class="snow-el" style="left:'+snow.randomPos(this.winW)+'px">*</span>';
60	                    };
61	                    el.append(str);
62	                    setTimeout(function(){
63	                        oSpan = $(".snow-el");
64	                        if(callback){
65	                            callback(oSpan);
66	                        }
67	                    },0);
68	                }
69	            };
70	            snow.init(null,400);
71	            snow.render(100,function(obj){
72	                obj.each(function(i,element){
73	                    var index = i % 38;
74	                    snow.drop($(this),index,false)
75	                })
76	            });
77	        });

[2].[代码] [CSS]代码 

view source
print?
01	<style type="text/css">
02	        html,body {
03	            background-color: #000;
04	            overflow: hidden;
05	        }
06	        .snow-el {
07	            color: #fff;
08	            font-size: 40px;
09	            font-family: "arial";
10	            position: absolute;
11	            top: -40px;
12	            opacity: .9;
13	            text-shadow: 0 0 3px #fff;
14	            -moz-animation:animations 2s ease infinite;
15	            -webkit-animation:animations 2s ease infinite;
16	            animation:animations 2s ease infinite;
17	        }
18	        @-webkit-keyframes animations{
19	            100%{transform:rotate(360deg);}
20	        }
21	        @-webkit-keyframes animations{
22	            100%{transform:rotate(360deg);}
23	        }
24	        @keyframes animations{
25	            100%{transform:rotate(360deg);}
26	        }
27	
28	    </style>