`

JQ 雪花落地的特效

雪花落地雪花特效JSJS雪花特效 
阅读更多

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>

 

效果图：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 85.8 KB
1
顶
0
踩
分享到：
| PHP 加密解密处理类
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    圣诞节基于jq雪花特效代码

    在本文中，我们将深入探讨如何使用jQuery（简称jq）库来创建一个充满节日氛围的“圣诞节基于jq雪花特效”代码。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及动画效果的实现，使得开发者可以...

    jQuery特效圣诞下雪花.zip

    【jQuery特效圣诞下雪花】是一种基于JavaScript库jQuery的创意网页特效，主要应用于圣诞节主题的网站设计，为用户提供一种模拟真实雪花飘落的视觉体验。这种特效可以增添网站的节日氛围，提升用户浏览时的互动性和...

    jq下拉列表特效.zip

    "jq下拉列表特效.zip"这个压缩包包含了8种不同的下拉列表js插件，这些插件可以为你的网站添加独特的视觉效果。 1. **jQuery**: jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...

    五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星

    雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动点击特效 雪花 气泡 蝙蝠 表情 星星 五种jQuery鼠标移动...

    flake_331_jsjq雪花_

    在本项目中，"flake_331_jsjq雪花_"是一个关于使用JavaScript和jQuery实现雪花纷飞特效的实例。这个特效常用于冬季主题的网页设计，为用户带来一种浪漫和节日的氛围。以下是对这个项目的详细解读： 1. **JavaScript...

    JQ浏览图片特效希望大家喜欢……

    下面我们将深入探讨这个“JQ浏览图片特效”的知识点。 首先，我们要明白jQuery如何处理图片特效。jQuery提供了丰富的API和方法，如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等，用于实现动态显示和隐藏图片，...

    jq手风琴特效

    "jq手风琴特效"是一种基于jQuery实现的常见UI交互效果，通常用于创建紧凑且交互性强的网页内容展示。手风琴特效得名于其开启和关闭面板时类似手风琴收缩与扩张的动作。 手风琴布局的基本概念是将多个内容区域（如...

    jq_snowjquery特效背景飘雪

    【jq_snowjquery特效背景飘雪】是一种使用jQuery库实现的网页动态效果，它为网页背景添加了模拟飘雪的视觉效果，增强了用户体验，尤其在冬季或者节日氛围中，这种特效能够营造出温馨浪漫的环境。jQuery是一个轻量级...

    不错的 JQ手风琴网页特效

    "JQ手风琴"是jQuery实现的一种常见网页特效，主要用于展示内容时节省空间，通过折叠和展开的方式，将大量信息以紧凑的形式呈现。手风琴效果在导航菜单、FAQs、产品介绍等场景中应用颇广。 手风琴特效的基本原理是...

    js雪花特效

    `jq.snow.js`是核心的JavaScript文件，包含了雪花特效的实现代码。这个文件中，开发者可能定义了一个函数或者类来生成雪花，并设置了各种参数，如雪花的数量、大小、下落速度和随机性，以模拟真实的雪花飘落效果。...

    jq鼠标移动特效

    "jq鼠标移动特效"指的是利用jQuery来实现当鼠标在网页元素上移动时，产生视觉上的动态效果。这种特效在网站设计中常见，可以增加用户交互体验，使页面更具吸引力。 jQuery中的鼠标移动事件主要有两种：`mouseenter`...

    网页图片动态切换包含jq诸多特效

    标题"网页图片动态切换包含jq诸多特效"指出了本项目主要关注的是使用jQuery实现的图片动态切换效果，这些效果可能包括但不限于以下几种： 1. **卡盘效果**：图片在页面上像卡盘一样旋转展示，常用于展示一组图片或...

    JQ特效汇总

    在JQ特效方面，我们可以分为以下几个主要类别： 1. **选择器**：jQuery的选择器基于CSS，允许开发者快速准确地选取页面中的元素。例如，`$("#id")`选择ID为指定值的元素，`$(".class")`选择所有具有特定类名的元素...

    jQ手风琴特效

    参考示例网站（http://www.jq22.com/jquery-info5038）提供了多种手风琴特效的实现方式，包括纯CSS实现、jQuery插件等。这些实例不仅展示了基本的手风琴效果，还包含了一些高级特性，如自动切换、多列布局等，为...

    jq浮动渐变工具栏特效.zip

    jq浮动渐变工具栏特效是一款浮动在顶部的一个菜单导航栏，默认隐藏不显示，当你的鼠标下滑，滚动到一定距离时，JS会自动判断屏幕位置并渐变显示顶部导航。当你的位置处于一屏的时候，导航则隐藏。   jq浮动渐变...

    jq幻灯片特效

    【jq幻灯片特效】是一种基于JavaScript库jQuery实现的动态展示内容的方式，广泛应用于网站的首页、产品展示、图片画廊等场景。这种特效通过自动切换或用户交互来展示一系列内容，如图片、文本或者HTML元素，使得网页...

    时间轴切换特效 JQ JS 时间轴特效

    在本文中，我们将深入探讨如何使用JavaScript（JS）和jQuery（JQ）库来实现一个时间轴切换特效。时间轴是一种强大的设计工具，它能够清晰地展示一系列事件或过程，尤其适用于项目管理、历史叙述或者产品发展过程的...

    jq大图淡入淡出特效.zip

    【jq大图淡入淡出特效】是一种使用jQuery库实现的网页动态效果，它主要用于展示一组图片，通过淡入淡出的方式实现图片的平滑切换，为网站添加一种优雅的视觉体验。这种特效常见于网站的首页或者产品展示区域，能够...

    适合jq的滑动解锁特效

    &lt;!...&lt;... &lt;head&gt; &lt;meta charset="UTF-8"&gt;...jQuery适合手机端滑动解锁代码 - 站长素材&lt;...meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;...

Magicbox
Global site tag (gtag.js) - Google Analytics