JQ 雪花落地的特效

Snow.css

#lace{
    position: fixed;
    z-index: 5;
    width: 100%;
    height: 100%;
}
#Snow0{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 99
}
.frost{
    height: 99px;
    background-size: 60%;
    background: url('top.png');
    position: absolute;
    background-position: center bottom;
    background-repeat: repeat-x;
}
#Snow0 > .min0{
    width: 100%;
    left:0;
    background-size:60%;     
    pointer-events: none;
    top: -133px;
    transform-origin: 0 133px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform-origin: 0 100px;
    -webkit-transform-origin: 0 100px;
    transform-origin: 0 100px;
}
#Snow0 > .min1{   
    width: 100%;
    background-size:60%;  
    left: calc(100% - 99px);
    top: 100%;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
}
#Snow0 > .min2{
    width: 100%;
    height: 99px;
    background-size: 60%;
    top: 0;
    left: 0;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    pointer-events: none;
}
#Snow0 > .min3{
    width:100%;
    height: 99px;
    background-size: 60%; 
    bottom: 0;
    left: 0;
    pointer-events: none;
}
#Snow1{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute; 
    z-index: 99;
}
.sprite{
    height: 99px;
    background-size: 80%;
    background: url('left.png');
    position: absolute;
    background-position: center bottom;
    background-repeat: repeat-x;
}
#Snow1 > .mcn0{
    width: 100%;
    left:0;
    background-size:60%;     
    pointer-events: none;
    top: -133px;
    transform-origin: 0 133px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -ms-transform-origin: 0 100px;
    -webkit-transform-origin: 0 100px;
    transform-origin: 0 100px;
}
#Snow1 > .mcn1{   
    width: 100%;
    background-size:60%;  
    left: calc(100% - 99px);
    top: 100%;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
}
#Snow1 > .mcn2{
    width: 100%;
    height: 99px;
    background-size: 60%;
    top: 0;
    left: 0;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    pointer-events: none;
}
#Snow1 > .mcn3{
    width:100%;
    height: 99px;
    background-size: 60%; 
    bottom: 0;
    left: 0;
}
#Snow2{
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
    pointer-events: none;
    z-index: 99;
}
#grate0{
    width: 100%;
    height:999999px;
    background: url('right.png');
    animation: rowup 4000s linear infinite normal;
    margin-top: -999999px;
}
#grate1{
    width: 100%;
    height: 600px;
    background: url('right.png');
    background-position: 60% 30%;
    height:999999px;
    margin-top: -999999px;
    animation: rowu 5000s linear infinite normal;
} 
.mxn0{
    width: 100%;
    height: 100%;
    overflow:hidden;
}
@keyframes rowup {
    100% {
        -webkit-transform: translate3d(0, 99999px, 0);
        transform: translate3d(0, 99999px, 0);
    }
}
@keyframes rowu {
    100% {
        -webkit-transform: translate3d(0, 99999px, 0);
        transform: translate3d(0, 99999px, 0);
    }
}
#just{
    width: 50px;
    height: 160px;
    position: fixed;
    top: 0px;
    right: 100px;
    cursor: pointer;
    z-index:99999999;
    background:url('snow.png')center bottom no-repeat;
    text-align: center;
}
#just:after
{ 
    content:"";
    border:1px solid rgb(236, 236, 236);
    height: 160px;
    display: inline-block;
    margin-left:2px;
}
.swing_christmas {
    -webkit-transform-origin:top center;
    -ms-transform-origin:top center;
    transform-origin:top center;
    animation:swing_christmas 3s linear 1s infinite both;
    -webkit-animation:swing_christmas 3s linear 1s infinite both;
}
@-webkit-keyframes swing_christmas{
    20%{-webkit-transform:rotate(8deg);transform:rotate(8deg)}
    40%{-webkit-transform:rotate(-6deg);transform:rotate(-6deg)}
    60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
    80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
    100%{-webkit-transform:rotate(0);transform:rotate(0)}
}
@keyframes swing_christmas{
    20%{-webkit-transform:rotate(8deg);-ms-transform:rotate(8deg);transform:rotate(8deg)}
    40%{-webkit-transform:rotate(-6deg);-ms-transform:rotate(-6deg);transform:rotate(-6deg)}
    60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}
    80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}
    100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
}

 

Snow.js

/* 动态创建基本元素节点 */
function GetStyleEvent(){
    var Div = document.createElement("div");
    Div.id = "lace";
    var Just = document.createElement("div");
    Just.id = "just";
    Just.className = "swing_christmas";
    document.body.appendChild(Just,First);
    var First = document.body.firstChild;
    document.body.insertBefore(Div,First);
    var arr = 3;
    for(var i = 0; i < arr; i++){
        var obj = document.createElement("div");
        obj.id = 'Snow' + i;
        i + 1;
        Div.appendChild(obj);
    }
    var ClassNames = document.getElementById('Snow0');
    var Cor = 4;
    for(var i = 0; i < Cor; i++){
        var Min = document.createElement("div");
        Min.className = 'frost min' + i;
        i + 1;
        ClassNames.appendChild(Min);
    }
    var Clss = document.getElementById('Snow1');
    for(var i = 0; i < Cor; i++){
        var Min = document.createElement("div");
        Min.className = 'sprite mcn' + i;
        i + 1;
        Clss.appendChild(Min);
    }
    var Clssa = document.getElementById('Snow2');
    for(var i = 0; i < Cor; i++){
        var Min = document.createElement("div");
        Min.className = 'dom_slice rowup mxn' + i;
        Min.id = 'mdd' + i;
        i + 1;
        Clssa.appendChild(Min);
    }
    var Names = document.getElementById('mdd0');
    var good = 3;
    for(var i = 0; i < good; i++){
        var Min = document.createElement("div");
        Min.id = 'drifter'+ i;
        Min.id = 'grate' + i
        i + 1;
        Names.appendChild(Min);
    }

    $('.nav_menu').addClass('nav_menu_active');

}
function GetAll_iD(){
	var result = [];
	var body = document.body;
	Get_iD(body);
	function Get_iD(ele){
		var Name = ele.id || "";
		if(Name != ""){
			var arr = Name.split(" ");
			for(var i = 0; i < arr.length; i++){
				var name = arr[i];
				if(name != "" && result.indexOf(name) == -1){
					result.push(name);
				}
			}
		}
		var childs = ele.childNodes;
		for(var i = 0; i < childs.length; i++){
			Get_iD(childs[i]);
		}
	}
    return result;
}

function isArray(arr,val){
    for(var i = 0; i < arr.length; i++){
        if(arr[i] == val){ 
            return true; 
        } 
        return false;
    }
}

var GetOpacity = {
    SetOpacity: function(ev, v){
        ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
    }
}

function fadeOut(elem, speed, opacity){
    speed = speed || 20;
    opacity = opacity || 0;
    var val = 150;
    (function(){
        GetOpacity.SetOpacity(elem, val);
        val -= 10;
        if(val >= opacity) {
            setTimeout(arguments.callee, speed);
        }else if(val < 0) {
            elem.style.display = 'none';
        }
    })();
}

function clickSnow1(){
    var clk = document.getElementById('Snow1');
    clk.onclick = function(){
        var Gid = GetAll_iD();
        if(isArray(Gid,'lace') == true){
            var a = document.getElementById('lace');
            if(a.style.display == 'none'){
                a.style.display = 'block';
                a.style.opacity = '30';
            }else{
                fadeOut(document.getElementById("lace"),30);
                $('.nav_menu').removeClass('nav_menu_active');
            }
        }else{
            return false;
        }
    }
}
function ClICK(){
    var clk = document.getElementById('just');
    clk.onclick = function(){
        var Gid = GetAll_iD();
        if(isArray(Gid,'lace') == true){
            var a = document.getElementById('lace');
            if(a.style.display == 'none'){
                a.style.display = 'block';
                a.style.opacity = '30';
            }else{
                fadeOut(document.getElementById("lace"),30);
                $('.nav_menu').removeClass('nav_menu_active');
            }
        }else{
            return false;
        }
    }
}
$(function () {
    GetStyleEvent();
    ClICK();
    clickSnow1();

    $('#just').hover(function(){
        $(this).removeClass('swing_christmas');
    },function (){
        $(this).addClass('swing_christmas');
    })
})

 

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>夜深迷人雪花落地</title>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="Snow.js"></script>
<link rel="stylesheet" type="text/css" href="Snow.css">
</head>
<body style="background:#000;margin:0;border:0;padding:0;">
</body>
</html>

 

效果图：