圣诞下雪效果

来源：互联网发布：好吃的东西知乎编辑：程序博客网时间：2024/05/24 16:16

 [JavaScript]代码 01jQuery(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: ix40                        },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 sourceprint?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        }2728    </style>

0 0