[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>