1. [代码][HTML]代码     
<a  href="javascript:void(function(){var d = document,a = 'setAttribute',s = d.createElement('script');s[a]('type','text/javascript');s[a]('src','http://www.veryued.org/wp-content/themes/google_snow.js');d.head.appendChild(s);})();">下雪</a>
2. [代码][JavaScript]代码     
(function(){
    if(window.zythumsgooglesnowloaded) return false;
    function oneCircle(ct,cw,ch,pw,_pw,ph,_ph){
        var rw = (_pw+(pw-_pw)*Math.random())*cw,
            rh = (_ph+(ph-_ph)*Math.random())*ch,
            ra = 0.5*Math.random(),
            rr = 50+cw/10*Math.random();
        ct.globalCompositeOperation = 'source-over';
        var g = ct.createRadialGradient(rw, rh, 0, rw, rh, rr);
        g.addColorStop(0,'rgba(240,240,240,'+ra+')');
        g.addColorStop(1,'rgba(240,240,240,0)');
        ct.fillStyle = g;
        ct.fillRect(0, 0, cw, ch);
        ct.fill();
    }
    function draw(ct){
        var pointerArr = [];
        this.dPointer = function(x,y){
            pointerArr.push({x:x,y:y});
            _draw(0);
        }
        this.dLine = function(x,y){
            pointerArr.push({x:x,y:y});
            _draw(0);
        }
        this.stop = function(){
            pointerArr.push(false);
        }
        var _draw = function(c){
            ct.globalCompositeOperation = 'destination-out';
            ct.lineWidth = 60;
            ct.lineCap = ct.lineJoin = "round";
            ct.beginPath();
            ct.moveTo(pointerArr[c].x,pointerArr[c].y);
            while(pointerArr[++c]){
                ct.lineTo(pointerArr[c].x,pointerArr[c].y);
            }
            ct.stroke();
            ct.closePath();
            if(pointerArr[c] == undefined) return false;
            _draw(++c);
        }
    }
    var d = document.createElement('div'),
        ca = document.createElement('canvas'),
        w = 0;h = 0;
    document.body.appendChild(d);
    d.appendChild(ca);
    d.style.cssText += ';position:fixed;top:0;left:0;bottom:0;right:0;z-index:100001;';
    w = d.offsetWidth;h = d.offsetHeight;
    ca.setAttribute('width',w);
    ca.setAttribute('height',h);
    ca.onselectstart = function(){return false};
    ca.style.cursor = 'pointer';
    ct = ca.getContext('2d');
    //forgs
    forgFinished = false;
    setTimeout(function(){
        (function(){
            var loopContent = 100,
            loop = function(){
                oneCircle(ct,w,h,1,0,0.05,-0.1);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
    },2000)
    setTimeout(function(){
        (function(){
            var loopContent = 80,
            loop = function(){
                oneCircle(ct,w,h,1.1,0.95,1,0);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
        (function(){
            var loopContent = 80,
            loop = function(){
                oneCircle(ct,w,h,0.05,-0.1,1,0);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
        (function(){
            var loopContent = 80,
            loop = function(){
                oneCircle(ct,w,h,1,0,1.1,0.95);
                if(loopContent--)   setTimeout(loop,50);
            }
            loop();
        })();
    },4000);
    setTimeout(function(){
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,1,0,0.3,0.05);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,0.95,0.7,1,0);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,0.3,0.05,1,0);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,1,0,0.95,0.7);
                if(loopContent--)   setTimeout(loop,40);
            }
            loop();
        })();
    },6000);
    setTimeout(function(){
        (function(){
            var loopContent = 50,
            loop = function(){
                oneCircle(ct,w,h,1,0,1,0);
                if(loopContent--)   setTimeout(loop,20);
            }
            loop();
        })();
        forgFinished = true;
        //ct.save();
    },7000);
    //draw;
    var dr = new draw(ct);
    var moveFlag = false;
    document.addEventListener('mousedown',function(e){
        if(forgFinished){
            dr.dPointer(e.clientX,e.clientY);
            moveFlag = true;
        }
    },false);
    document.addEventListener('mousemove',function(e){
        if(moveFlag) dr.dLine(e.clientX,e.clientY)
    },false);http://www.huiyi8.com/clxgt/​
    document.addEventListener('mouseup',function(e){
        dr.stop(e.clientX,e.clientY)
        moveFlag = false;
    },false);窗帘效果图
    document.addEventListener('touchstart',function(e){
        dr.dPointer(e.clientX,e.clientY);
        moveFlag = true;
    },false);
    document.addEventListener('touchmove',function(e){
        if(moveFlag) dr.dLine(e.clientX,e.clientY)
    },false);
    document.addEventListener('touchend',function(e){
        dr.stop(e.clientX,e.clientY)
        moveFlag = false;
    },false);
    //snow
    var sd = document.createElement('div');
    document.body.appendChild(sd);
    sd.style.cssText += ';position:fixed;top:0;left:0;right:0;bottom:0;z-index:100000;overflow:hidden;';
    var ss = [];
    var limit = 0;
    var stime = setInterval(function(){
        if(limit++ == 5){
            limit = 0;
            var ns = document.createElement('div');
            ns.innerHTML = '\u2745';
            ns.style.cssText += ';position:absolute;top:-2px;color:#333;opacity:0.8;';
            //-webkit-transition:top 0.05 linear;-webkit-transition:left 0.05 linear;-moz-transition:top 0.05 linear;-moz-transition:left 0.05 linear;-o-transition:top 0.05 linear;-o-transition:left 0.05 linear;
            ns.ztop = -2;
            ns._ztop = 2+Math.random()*5;
            ns.zleft = Math.random()*sd.offsetWidth;
            ns._zleft = Math.random()<0.5? Math.random() : Math.random()*(-1);
            ns.style.fontSize = 16*Math.random()+'px';
            ns.style.opacity = 0.5+Math.random()*0.5;
            ns.style.left = ns.zleft+'px';
            sd.appendChild(ns);
            ss.push(ns);            
        }
        for(var i=0;i<ss.length;i++){
            ss[i].ztop += ss[i]._ztop;
            ss[i].zleft += ss[i]._zleft;                
            if(ss[i].ztop > sd.offsetHeight){
                sd.removeChild(ss[i]);
                ss.splice(i,1);
            }else{
                ss[i].style.top = ss[i].ztop+'px';
                ss[i].style.left = ss[i].zleft+'px';
            }
        }
    },20);
    //close
    setTimeout(function(){
        var close = document.createElement('div');
        close.innerHTML = '{Stop snowing.}';
        close.style.cssText += ';cursor:pointer;text-shadow:0 0 5px #fff;color#aaa;font-size:16px;position:fixed;top:20px;right:20px;font-family:arial,sans-erif;z-index:100002';
        document.body.appendChild(close);
        close.addEventListener('click',function(){
            clearInterval(stime);
            document.body.removeChild(d);
            document.body.removeChild(sd);
            document.body.removeChild(close);
            window.zythumsgooglesnowloaded = undefined;
        },false);
    },5000);
    window.zythumsgooglesnowloaded = true;
})();

转载于:https://www.cnblogs.com/xkzy/p/3937525.html

HTML页面下雪特效相关推荐

  1. html 页面下雪效果,HTML页面下雪特效

    1. [代码][HTML]代码 下雪 2. [代码][JavaScript]代码 (function(){ if(window.zythumsgooglesnowloaded) return fals ...

  2. html 页面下雪效果,HTML5超逼真下雪场景效果

    简要教程 这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法 在页面中引入ThreeCanva ...

  3. cesium实现下雨下雪特效

    页面效果 使用着色器实例特效 下雨特效着色器 // 下雨特效 rain () {removeStage();var e = new Cesium.PostProcessStage({name: &qu ...

  4. 怎么把 html做成雪花特效,CSS3 HTML5下雪特效 雪花飘飘

    CSS3 HTML5下雪特效 雪花飘飘 $(document).ready(function () { makeSnow("christmasSnow", "bg.jpg ...

  5. 页面向左移动动画html,jQuery仿左右窗帘拉开页面动画特效

    特效描述:左右窗帘拉开 页面动画特效,jQuery仿窗帘左右拉开动画,展开完成后移除dom,窗帘拉开页面动画特效,窗帘动画. 代码结构 1. 引入JS 2. HTML代码 /* 裁剪效果 o:jq d ...

  6. 下雪了堆雪人去 下雪特效

    jquery实现的下雪特效. 效果体验:http://keleyi.com/a/bjac/e8t7hoj4.htm 以下是HTML文件代码: 1 <!DOCTYPE html PUBLIC &q ...

  7. CSS3 HTML5下雪特效 雪花飘飘

    <!doctype html> <html lang="en"> <head> <meta charset=utf-8 /> < ...

  8. 仿xl9页面幻灯片特效—HTML模板

    介绍: 仿xl9页面幻灯片特效-HTML模板,非常好看的模板 预览效果:https://www.jq22.com/yanshi11908 网盘下载地址: http://kekewl.org/zFMeY ...

  9. 下雪html特效代码,JavaScript 实现下雪特效的示例代码

    直接上代码 下雪效果实现 body,html{ overflow: hidden; } var snowflakes = { arr:[],// 数组盛放元素 snowflake : [//雪花类型 ...

最新文章

  1. 使用SQLite删除Mac OS X 中launchpad里的快捷方式
  2. COM组件转换成.NET组件[转]
  3. iOS开发的库的列表,不完全是开源库
  4. Oracle调优综述
  5. 这是我看过最好的Java编程入门视频教程!
  6. 容器的使用(6-12)
  7. Linux实战案例(4)CentOS清除用户登录记录和命令历史方法
  8. 标签有关用法以及锚点定位;
  9. window server2012服务器上如何安装nginx并启动
  10. 搞定操作系统面试,看这篇就够了(二)
  11. 布客·ApacheCN 编程/后端/大数据/人工智能学习资源 2020.7
  12. RISC和CISC的比较VLIW、EPIC
  13. mysql堆溢出_MySQL错误1436:线程堆栈溢出,带有简单查询
  14. Vue 3 + Vite + Eslint + prettier + husky + lint-staged 搭建基础项目
  15. Efficient multi-keyword ranked query over encrypted data in cloud computing (6)
  16. IDEA SpringBoot 同一个模块启动多个服务(实例)
  17. 第十节:Keras深度学习框架实战之波斯顿房价回归预测
  18. 寂寞是因为思念谁(校园民谣)铃声 寂寞是因为思念谁(校园民谣)...
  19. 面试这么久,终于收到offer了,月薪10k自研和13k外包该怎么选?
  20. 【linuxs make 出现undefined reference to ‘std::__cxx11...】

热门文章

  1. 遗传算法中的变异和交叉
  2. 《Android群英传》读书笔记
  3. 刚刚,云之家、聚美、中公教育等120款APP侵害用户权益被点名
  4. python数据结构之单链表
  5. 背景减除算法之K-Nearest(KNN)和Mixture of Gaussians(MOG2)
  6. workbench 左侧导航栏消失解决方案
  7. 条件自信息量与互信息量的区别
  8. BigDecimal出现多位小数问题
  9. 鸿蒙希夷太清太虚的意思,希夷的意思
  10. 新版androd studio怎样连接第三方模拟器