精华内容
下载资源
问答
  • 2022-01-29 20:20:27

    就快过年了,先给大家🔥们拜个早年。

    🧨🧨🧨

    今天我们来学习一下如何在html里加入雪花飘落的特效,需要使用到的知识:画布(Canvas)和js作画。

    首先我们先建立一个画布

     var canvas =document.getElementById("canvas")
        var context = canvas.getContext("2d")  //2d 即指二维平面
        var w =window.innerWidth
        var h =window.innerHeight
        canvas.width = w;  //全局分布
        canvas.height =h; 

    然后再设置雪花组

     var count =200 //雪花的个数
        var snows=[] //雪花对象数组
        for (var i=0 ; i< count;i++){
            snows.push({
                x:Math.random()*w,    //Math.random()用于生成0~1的随机数
                y:Math.random()*h,
                r:Math.random()*5,
            })
        }

    然后制定雪花的样式(圆形比较好用。。。)

     function draw(){
            context.clearRect(0,0,w,h)
            context.beginPath()
            for(var i=0; i<count;i++){
                var snow = snows[i]; 
                context.fillStyle ="rgb(255,255,255)" //设置雪花的样式
                context.shadowBlur=10;
                context.shadowColor="rgb(255,255,255)";
    
    
                //moveTo 移动到指定的坐标
                context.moveTo(snow.x,snow.y)
                // 使用canvas arc()创建一个圆形
                 //x,y,r:圆的中心的x坐标和y坐标,r为半径
                //0,Math.PI * 2起始弧度和结束弧度
                
                context.arc(snow.x,snow.y,snow.r,0,Math.PI * 2)
                
            }
            //画布填充
            context.fill()
            move()
        }

    最后让它们飘起来:

     function move(){
            for (var i=0;i<count;i++){
                var snow =snows[i];
                snow.y +=(7-snow.r)/10 //从上往下飘落
                snow.x+=((5-snow.r)/10)//从左到右飘落
                if(snow.y>h){
                    snows[i]={
                        x:Math.random()*w,
                        y:Math.random()*h,
                        r:Math.random()*5,
                    }
                }
            }
        }

    别忘了设置刷新(频率要调高,不然会感觉很卡)

     draw()
        //每毫秒刷新一次
     setInterval(draw,1)

     

    更多相关内容
  • 唯美雪景雪花飘落效果代码基于ThreeCanvas.js和Snow.js制作,效果逼真,雪景背景图片可根据实际需要自行更换,雪花飘落有鼠标跟随特效。
  • 主要为大家详细介绍了HTML5 canvas实现雪花飘落特效,效果实现引人入胜,很逼真的动画效果,感兴趣的小伙伴们可以参考一下
  • 如何使用HTML5 canvas实现雪花飘落

    千次阅读 2021-06-24 03:06:29
    这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效,效果实现引人入胜,很逼真的动画效果,感兴趣的小伙伴们可以参考一下看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样...

    这篇文章主要为大家详细介绍了HTML5 canvas实现雪花飘落特效,效果实现引人入胜,很逼真的动画效果,感兴趣的小伙伴们可以参考一下

    看到网上很多展示html5雪花飞动的效果,确实非常引人入胜,我相信大家也跟我一样看着心动的同时,也很好奇,想研究下代码如何实现;虽然很多地方也能下载这些源码,不过也不知道别人制作此类动画时的思路及难点分析。

    我这几天刚好学习了一下,也趁着此刻有时间从需求分析、知识点、程序编写一步步给大家解剖下,要是在各位关公面前耍大刀了,可别见笑哟。

    最终效果图如下:

    6fcad7d36e263fa70ba7698f305a3558.gif

    图1

    一、需求分析

    1、圆形雪花

    本示例中雪花形状使用圆形

    2、雪花数量固定

    根据图1仔细观察白色雪花数量,飘落过程中,整张图的雪花数量应该是固定的,这个需求是需要通过我们观察分析所得。这与我们现实生活中看到一幅雪花满天飞的场景是一致的。

    3、雪花大小不一致

    每朵雪花它们大小各有不同,也就意味着雪花的半径是随机的。这与我们现实生活中看到一幅雪花满天飞的场景也是一致的。

    4、雪花位置在移动

    雪花飘落,自然它们的位置也在移动。

    二、知识点

    1、使用Html5 Canvas+JavaScript画圆——构成圆形雪花

    在Html5中,需要使用Canvas同时借助JavaScript画圆,以构成圆形雪花——arc(x,y,r,start,stop);

    2、随机数—产生不同半径、坐标的圆形雪花

    本示例中,网页第一次加载时,需要生成一定数量的不同半径及位置的雪花,故半径、坐标为随机数;雪花在飘落过程中,其半径不变,坐标在一定幅度内变化,故此时坐标也为随机数——Math.random()

    三、程序编写

    1、准备工作

    放一个画布canvas,并且设置整个body背景色为黑色

    HTML代码:

    您的浏览器不支持canvas画布

    CSS代码:* {

    margin: 0;

    padding: 0;

    }

    #mycanvas {

    background: black;

    }

    此时效果如如下:

    95e873a7ecad4d4312611d50df717951.png

    注意:canvas默认是有一个初始化高度和宽度的,所以不用去纠结

    2、画布满屏显示

    JavaScript代码如下://获取mycanvas画布

    var can = document.getElementById("mycanvas");

    var ctx = can.getContext("2d");

    //画布宽度

    var wid = window.innerWidth;

    //画布高度

    var hei = window.innerHeight;

    can.width=wid;

    can.height=hei;

    此时效果如如下:

    fa84a6d990b55074387fba760cf85e70.png

    3、初始化生成固定数量的雪花

    根据我们上述需求分析及知识点解读,首先雪花的数量是固定的,所以我们需要定义一个变量var snow = 100;这里假设雪花数量为100,;

    生成雪花的时候,每个雪花半径、位置都不同,我们把每个雪花当做一个对象,那么这个对象的属性就包含:半径、坐标(X、Y),那么一个雪花对象可以写成var snowOject={x:1,y:10,r:5},这里就代表一个坐标为(1,10)半径为5的圆形雪花;本示例中由于半径和坐标都为随机数,故使用Math.random()分别为100个雪花生成半径、坐标(X、Y);

    那我们这里是100个雪花,所以为了方便后面操作,就用一个数组保存这100个雪花对象。

    JavaScript代码如下://雪花数目

    var snow = 100;

    //雪花坐标、半径

    var arr = []; //保存各圆坐标及半径

    for (var i = 0; i < snow; i++) {

    arr.push({

    x: Math.random() * wid,

    y: Math.random() * hei,

    r: Math.random() * 10 + 1

    })

    }

    4、绘制雪花

    上面我们已经将100个雪花半径、坐标(X、Y)生成,下面就是循环使用canvas画出雪花了(这里就是画圆),这里定义一个函数

    JavaScript代码如下://画雪花

    function DrawSnow() {

    ctx.fillStyle="white";

    ctx.beginPath();

    for (var i = 0; i < snow; i++) {

    var p = arr[i];

    ctx.moveTo(p.x,p.y);

    ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false);

    }

    ctx.fill();

    ctx.closePath();

    然后调用 DrawSnow()函数,效果如下:

    7b79943dca6ae64b341e44e6b6a66012.png

    可以尝试多次刷新网页看是否会生成不同大小、位置的雪花(正常情况下是可以的),做到这里就已经接近最终效果了

    注意:由于这里需要绘制100个圆,所以每当画一个圆时重新定义绘制开始坐标即:ctx.moveTo(p.x,p.y);否则会出现异样效果,不信可以试试呀

    5、雪花飘动

    上面我们已经画出100个雪花,可惜只能依靠刷新网页才能看到变化效果,但是我们需要实现的是雪花不停的移动位置。

    首先我们需要借助setInterval函数不停的重画雪花,这里间隔时间为50毫秒:setInterval(DrawSnow,50);

    同时每一朵雪花的坐标(X、Y)需要不停的改变(在一定幅度内),我们这里的雪花是从左上方飘落到右下方,所以每朵X、Y坐标值都在不停的增大,那我们用一个函数SnowFall()定义雪花飘过规则

    该函数代码如下://雪花飘落

    function SnowFall() {

    for (var i = 0; i < snow; i++) {

    var p = arr[i];

    p.y += Math.random() * 2 + 1;

    if (p.y > hei) {

    p.y = 0;

    }

    p.x += Math.random() * 2 + 1;

    if (p.x > wid) {

    p.x = 0;

    }

    }

    }

    然后将该函数放入DrawSnow()执行,注意:我们每隔50毫毛重画雪花,必须擦除画布,所以DrawSnow()函数体内必须在前面执行clearRect()函数,即:ctx.clearRect(0, 0, wid, hei);

    此时DrawSnow函数定义如下://画雪花

    function DrawSnow() {

    ctx.clearRect(0, 0, wid, hei);

    ctx.fillStyle = "white";

    ctx.beginPath();

    for (var i = 0; i < snow; i++) {

    var p = arr[i];

    ctx.moveTo(p.x, p.y);

    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);

    }

    ctx.fill();

    SnowFall();

    ctx.closePath();

    }

    最后执行setInterval(DrawSnow, 50);

    OK,经过我们上述步骤,小伙伴们是否已经对整个过程及技术实现很清晰了。

    完整代码如下(大家可以直接复制到自己项目中执行,测试下效果):

    * {

    margin: 0;

    padding: 0;

    }

    #mycanvas {

    background: black;

    }

    您的浏览器不支持canvas画布

    //获取mycanvas画布

    var can = document.getElementById("mycanvas");

    var ctx = can.getContext("2d");

    //画布宽度

    var wid = window.innerWidth;

    //画布高度

    var hei = window.innerHeight;

    can.width = wid;

    can.height = hei;

    //雪花数目

    var snow = 100;

    //雪花坐标、半径

    var arr = []; //保存各圆坐标及半径

    for (var i = 0; i < snow; i++) {

    arr.push({

    x: Math.random() * wid,

    y: Math.random() * hei,

    r: Math.random() * 10 + 1

    })

    }

    //画雪花

    function DrawSnow() {

    ctx.clearRect(0, 0, wid, hei);

    ctx.fillStyle = "white";

    ctx.beginPath();

    for (var i = 0; i < snow; i++) {

    var p = arr[i];

    ctx.moveTo(p.x, p.y);

    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);

    }

    ctx.fill();

    SnowFall();

    ctx.closePath();

    }

    //雪花飘落

    function SnowFall() {

    for (var i = 0; i < snow; i++) {

    var p = arr[i];

    p.y += Math.random() * 2 + 1;

    if (p.y > hei) {

    p.y = 0;

    }

    p.x += Math.random() * 2 + 1;

    if (p.x > wid) {

    p.x = 0;

    }

    }

    }

    setInterval(DrawSnow, 50);

    好了,今天分享就到这里,希望对大家的学习有所帮助。

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    展开全文
  • 超酷html5雪花飘落特效源码

    千次阅读 2021-06-11 01:13:29
    今天给大家带来的是 超酷html5雪花飘落特效源码!大家可以按照自己的想法去修改成自己喜欢的样子,需要文档版本源码,可以加我的HTML5前端交流群111645711废话不多说了,,上源码!//使用时去掉if语句即可varTHREE=...

    a4c26d1e5885305701be709a3d33442f.png

    效果图

    各位朋友大家上午好!

    今天给大家带来的是 超酷html5雪花飘落特效源码!

    大家可以按照自己的想法去修改成自己喜欢的样子,

    需要文档版本源码,可以加我的HTML5前端交流群111645711

    废话不多说了,,上源码!

    //使用时去掉if语句即可

    var

    THREE=THREE||{};if(!self.Int32Array)self.Int32Array=Array,self.Float32Array=Array;THREE.Color=function(a){a!==void

    0&&this.setHex(a);return

    this};THREE.Color.prototype={constructor:THREE.Color,r:1,g:1,b:1,copy:function(a){this.r=a.r;this.g=a.g;this.b=a.b;return

    this},copyGammaToLinear:function(a){this.r=a.r*a.r;this.g=a.g*a.g;this.b=a.b*a.b;return

    this},copyLinearToGamma:function(a){this.r=Math.sqrt(a.r);this.g=Math.sqrt(a.g);this.b=Math.sqrt(a.b);return

    this},setRGB:function(a,b,c){this.r=a;this.g=b;this.b=c;return

    this},setHSV:function(a,b,c){var

    d,f,e;if(c===0)this.r=this.g=this.b=0;else

    switch(d=Math.floor(a*6),f=a*6-d,a=c*(1-b),e=c*(1-b*f),b=c*(1-b*(1-f)),d){case

    1:this.r=e;this.g=c;this.b=a;break;case

    2:this.r=a;this.g=c;this.b=b;break;case

    3:this.r=a;this.g=e;this.b=c;break;case

    4:this.r=b;this.g=a;this.b=c;break;case

    5:this.r=c;this.g=a;this.b=e;break;case 6:case

    0:this.r=c,this.g=b,this.b=a}return

    this},setHex:function(a){a=Math.floor(a);this.r=(a>>16&255)/255;this.g=(a>>8&255)/255;this.b=(a&255)/255;return

    this},getHex:function(){return~~(this.r*255)<<16^~~(this.g*255)<<8^~~(this.b*255)},getContextStyle:function(){return"rgb("+Math.floor(this.r*255)+","+Math.floor(this.g*255)+","+Math.floor(this.b*255)+")"},clone:function(){return(new

    THREE.Color).setRGB(this.r,this.g,this.b)}};THREE.Vector2=function(a,b){this.x=a||0;this.y=b||0};THREE.Vector2.prototype={constructor:THREE.Vector2,set:function(a,b){this.x=a;this.y=b;return

    this},copy:function(a){this.x=a.x;this.y=a.y;return

    this},clone:function(){return new

    THREE.Vector2(this.x,this.y)},add:function(a,b){this.x=a.x+b.x;this.y=a.y+b.y;return

    this},addSelf:function(a){this.x+=a.x;this.y+=a.y;return

    this},sub:function(a,b){this.x=a.x-b.x;this.y=a.y-b.y;return

    this},subSelf:function(a){this.x-=a.x;this.y-=a.y;return

    this},multiplyScalar:function(a){this.x*=a;this.y*=a;return

    this},divideScalar:function(a){a?(this.x/= a, this.y

    /=a):this.set(0,0);return this},negate:function(){return

    this.multiplyScalar(-1)},dot:function(a){return

    this.x*a.x+this.y*a.y},lengthSq:function(){return

    this.x*this.x+this.y*this.y},length:function(){return

    Math.sqrt(this.lengthSq())},normalize:function(){return

    this.divideScalar(this.length())},distanceTo:function(a){return

    Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){var

    b=this.x-a.x,a=this.y-a.y;return

    b*b+a*a},setLength:function(a){return

    this.normalize().multiplyScalar(a)},equals:function(a){return

    a.x===this.x&&a.y===this.y}};THREE.Vector3=function(a,b,c){this.x=a||0;this.y=b||0;this.z=c||0};THREE.Vector3.prototype={constructor:THREE.Vector3,set:function(a,b,c){this.x=a;this.y=b;this.z=c;return

    this},setX:function(a){this.x=a;return

    this},setY:function(a){this.y=a;return

    this},setZ:function(a){this.z=a;return

    this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;return

    this},clone:function(){return new

    THREE.Vector3(this.x,this.y,this.z)},add:function(a,b){this.x=a.x+b.x;this.y=a.y+b.y;this.z=a.z+b.z;return

    this},addSelf:function(a){this.x+=a.x;this.y+=a.y;this.z+=a.z;return

    this},addScalar:function(a){this.x+=a;this.y+=a;this.z+=a;return

    this},sub:function(a,b){this.x=a.x-b.x;this.y=a.y-b.y;this.z=a.z-b.z;return

    this},subSelf:function(a){this.x-=a.x;this.y-=a.y;this.z-=a.z;return

    this},multiply:function(a,b){this.x=a.x*b.x;this.y=a.y*b.y;this.z=a.z*b.z;return

    this},multiplySelf:function(a){this.x*=a.x;this.y*=a.y;this.z*=a.z;return

    this},multiplyScalar:function(a){this.x*=a;this.y*=a;this.z*=a;return

    this},divideSelf:function(a){this.x/=a.x;this.y/=a.y;this.z/=a.z;return

    this},divideScalar:function(a){a?(this.x/= a, this.y

    /=a,this.z/=a):this.z=this.y=this.x=0;return

    this},negate:function(){return

    this.multiplyScalar(-1)},dot:function(a){return

    this.x*a.x+this.y*a.y+this.z*a.z},lengthSq:function(){return

    this.x*this.x+this.y*this.y+this.z*this.z},length:function(){return

    Math.sqrt(this.lengthSq())},lengthManhattan:function(){return

    this.x+this.y+this.z},normalize:function(){return

    this.divideScalar(this.length())},setLength:function(a){return

    this.normalize().multiplyScalar(a)},cross:function(a,b){this.x=a.y*b.z-a.z*b.y;this.y=a.z*b.x-a.x*b.z;this.z=a.x*b.y-a.y*b.x;return

    this},crossSelf:function(a){var

    b=this.x,c=this.y,d=this.z;this.x=c*a.z-d*a.y;this.y=d*a.x-b*a.z;this.z=b*a.y-c*a.x;return

    this},distanceTo:function(a){return

    Math.sqrt(this.distanceToSquared(a))},distanceToSquared:function(a){return(new

    THREE.Vector3).sub(this,a).lengthSq()},setPositionFromMatrix:function(a){this.x=a.n14;this.y=a.n24;this.z=a.n34},setRotationFromMatrix:function(a){var

    b=Math.cos(this.y);this.y=Math.asin(a.n13);Math.abs(b)>1.0E-5?(this.x=Math.atan2(-a.n23/

    b, a.n33 /b),this.z=Math.atan2(-a.n12/ b, a.n11

    /b)):(this.x=0,this.z=Math.atan2(a.n21,a.n22))},isZero:function(){return

    this.lengthSq()<1.0E-4}};THREE.Vector4=function(a,b,c,d){this.x=a||0;this.y=b||0;this.z=c||0;this.w=d!==void

    0?d:1};THREE.Vector4.prototype={constructor:THREE.Vector4,set:function(a,b,c,d){this.x=a;this.y=b;this.z=c;this.w=d;return

    this},copy:function(a){this.x=a.x;this.y=a.y;this.z=a.z;this.w=a.w!==void

    0?a.w:1},clone:function(){return new

    THREE.Vector4(this.x,this.y,this.z,this.w)},add:function(a,b){this.x=a.x+b.x;this.y=a.y+b.y;this.z=a.z+b.z;this.w=a.w+b.w;return

    this},addSelf:function(a){this.x+=a.x;this.y+=a.y;this.z+=a.z;this.w+=a.w;return

    this},sub:function(a,b){this.x=a.x-b.x;this.y=a.y-b.y;this.z=a.z-b.z;this.w=a.w-b.w;return

    this},subSelf:function(a){this.x-=a.x;this.y-=a.y;this.z-=a.z;this.w-=a.w;return

    this},multiplyScalar:function(a){this.x*=a;this.y*=a;this.z*=a;this.w*=a;return

    this},divideScalar:function(a){a?(this.x/= a, this.y /=a,this.z/=

    a, this.w /=a):(this.z=this.y=this.x=0,this.w=1);return

    this},negate:function(){return

    this.multiplyScalar(-1)},dot:function(a){return

    this.x*a.x+this.y*a.y+this.z*a.z+this.w*a.w},lengthSq:function(){return

    this.dot(this)},length:function(){return

    Math.sqrt(this.lengthSq())},normalize:function(){return

    this.divideScalar(this.length())},setLength:function(a){return

    this.normalize().multiplyScalar(a)},lerpSelf:function(a,b){this.x+=(a.x-this.x)*b;this.y+=(a.y-this.y)*b;this.z+=(a.z-this.z)*b;this.w+=(a.w-this.w)*b;return

    this}};THREE.Ray=function(a,b){function

    c(a,b,c){i.sub(c,a);p=i.dot(b);if(p<=0)return

    null;k=n.add(a,o.copy(b).multiplyScalar(p));return

    s=c.distanceTo(k)}function

    d(a,b,c,d){i.sub(d,b);n.sub(c,b);o.sub(a,b);K=i.dot(i);C=i.dot(n);Q=i.dot(o);O=n.dot(n);w=n.dot(o);F=1/(K*O-C*C);z=(O*Q-C*w)*F;D=(K*w-C*Q)*F;return

    z>=0&&D>=0&&z+D<1}this.origin=a||new

    THREE.Vector3;this.direction=b||new

    THREE.Vector3;this.intersectScene=function(a){return

    this.intersectObjects(a.children)};this.intersectObjects=function(a){var

    b,c,d=[];b=0;for(c=a.length;bk.scale.x)return[];i={distance:n,point:k.position,face:null,object:k};o.push(i)}else

    if(k instanceof

    THREE.Mesh){n=c(this.origin,this.direction,k.matrixWorld.getPosition());if(n===null||n>k.geometry.boundingSphere.radius*Math.max(k.scale.x,Math.max(k.scale.y,k.scale.z)))return

    o;var

    p,G=k.geometry,H=G.vertices,I;k.matrixRotationWorld.extractRotation(k.matrixWorld);n=0;for(W=G.faces.length;n<=0)&&(f=I.multiplyVector3(f.copy(H[i.a].position)),e=I.multiplyVector3(e.copy(H[i.b].position)),g=I.multiplyVector3(g.copy(H[i.c].position)),i

    instanceof

    THREE.Face4&&(h=I.multiplyVector3(h.copy(H[i.d].position))),l=k.matrixRotationWorld.multiplyVector3(l.copy(i.normal)),p=b.dot(l),k.doubleSided||(k.flipSided?p>0:p<0)))if(p=l.dot(m.sub(f,a))/p,j.add(a,b.multiplyScalar(p)),i

    instanceof

    THREE.Face3)d(j,f,e,g)&&(i={distance:a.distanceTo(j),point:j.clone(),face:i,object:k},o.push(i));else

    if(i instanceof

    THREE.Face4&&(d(j,f,e,h)||d(j,e,g,h)))i={distance:a.distanceTo(j),point:j.clone(),face:i,object:k},o.push(i)}return

    o};var i=new THREE.Vector3,n=new THREE.Vector3,o=new

    THREE.Vector3,p,k,s,K,C,Q,O,w,F,z,D};THREE.Rectangle=function(){function

    a(){e=d-b;g=f-c}var b,c,d,f,e,g,h=!0;this.getX=function(){return

    b};this.getY=function(){return c};this.getWidth=function(){return

    e};this.getHeight=function(){return

    g};this.getLeft=function(){return b};this.getTop=function(){return

    c};this.getRight=function(){return

    d};this.getBottom=function(){return

    f};this.set=function(e,g,j,i){h=!1;b=e;c=g;d=j;f=i;a()};this.addPoint=function(e,g){h?(h=!1,b=e,c=g,d=e,f=g):(b=be?d:e,f=f>g?f:g);a()};this.add3Points=function(e,g,j,i,n,o){h?(h=!1,b=ej?e>n?e:n:j>n?j:n,f=g>i?g>o?g:o:i>o?i:o):(b=ej?e>n?e>d?e:d:n>d?n:d:j>n?j>d?j:d:n>d?n:d,f=g>i?g>o?g>f?g:f:o>f?o:f:i>o?i>f?i:f:o>f?o:f);a()};this.addRectangle=function(e){h?(h=!1,b=e.getLeft(),c=e.getTop(),d=e.getRight(),f=e.getBottom()):(b=be.getRight()?d:e.getRight(),f=f>e.getBottom()?f:e.getBottom());a()};this.inflate=function(e){b-=e;c-=e;d+=e;f+=e;a()};this.minSelf=function(e){b=b>e.getLeft()?b:e.getLeft();c=c>e.getTop()?c:e.getTop();d=d=0&&Math.min(f,a.getBottom())-Math.max(c,a.getTop())>=0};this.empty=function(){h=!0;f=d=c=b=0;a()};this.isEmpty=function(){return

    h}};THREE.Math={clamp:function(a,b,c){return ac?c:a},clampBottom:function(a,b){return a

    展开全文
  • HTML5 唯美雪花飘落

    2016-07-25 08:57:27
    HTML5 唯美雪花飘落 场景,跟随鼠标动态效果
  • HTML5 canvas炫酷3D雪花飘落特效
  • html雪花飘落效果.zip

    2020-01-03 15:58:39
    Html/css/js 页面雪花飘落 动画
  • html5+css3实现的超酷雪花飘落特效源码一款实现了非常漂亮的canvas雪花飘落特效代码,非常真实,使用也非常方便,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流...
  • html+CSS样式:雪花飘落背景(雪花为图片)

    千次阅读 多人点赞 2020-04-08 11:45:44
    多种雪花图片,自由下落到底端渐变消失 <!DOCTYPE html> <html style="background-color: black"> <head> <...雪花飘落</title> <meta content='wid...

     

    多种雪花图片,自由下落到底端渐变消失

     

     

    html代码

    <!DOCTYPE html>
    
    <html style="background-color: black">
    
    <head>
    
    	<meta charset="UTF-8">
    
    	<title>雪花飘落</title>
    
    	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    
    	<style>
    
    			html,body {width: 100%;}
    
    			#leafContainer
    
    			{
    
    				position: fixed;
    
    				z-index: 2;
    
    				width: 100%;
    
    				height: 100%;
    
    				top: 0;
    
    				overflow: hidden;
    
    			}
    
    
    			#leafContainer > div
    
    			{
    
    				position: absolute;
    
    				max-width: 100px;
    
    				max-height: 100px;
    
    				-webkit-animation-iteration-count: infinite, infinite;
    				-webkit-animation-direction: normal, normal;
    
    				-webkit-animation-timing-function: linear, ease-in;
    
    			}
    
    
    			#leafContainer > div > img
    
    			{
    
    				width: 100%;
    
    				-webkit-animation-iteration-count: infinite;
    
    				-webkit-animation-direction: alternate;
    
    				-webkit-animation-timing-function: ease-in-out;
    
    				-webkit-transform-origin: 50% -100%;
    
    			}
    
    			@-webkit-keyframes fade
    
    			{
    
    				0%   {
    
    				opacity: 1;
    
    			}
    
    			95%
    
    			{
    
    				opacity: 1;
    
    			}
    
    			100%
    
    			{
    
    				opacity: 0;
    
    			}
    
    			}
    
    			@-webkit-keyframes drop
    
    			{
    
    				0%   {
    
    				-webkit-transform: translate(0px, -50px);
    
    			}
    
    			100%
    
    			{
    
    				-webkit-transform: translate(0px, 650px);
    
    			}
    
    			}
    
    			@-webkit-keyframes clockwiseSpin
    
    			{
    
    				0%   {
    
    				-webkit-transform: rotate(-50deg);
    
    			}
    
    			100%
    
    			{
    
    				-webkit-transform: rotate(50deg);
    
    			}
    
    			}
    
    			@-webkit-keyframes counterclockwiseSpinAndFlip
    
    			{
    
    				0%   {
    
    				-webkit-transform: scale(-1, 1) rotate(50deg);
    
    			}
    
    			100%
    
    			{
    
    				-webkit-transform: scale(-1, 1) rotate(-50deg);
    
    			}
    
    			}
    
    		</style>
    
    	<script>
    
    
    		const NUMBER_OF_LEAVES = 50;
    
     
    
    	function init()
    
    		{
    
    		    
    
    		    var container = document.getElementById('leafContainer');
    
    		   
    
    		    for (var i = 0; i < NUMBER_OF_LEAVES; i++) 
    
    		    {
    
    		        container.appendChild(createALeaf());
    
    		    }
    
    		}
    
    
    
    		function randomInteger(low, high)
    
    		{
    
    		    return low + Math.floor(Math.random() * (high - low));
    
    		}
    
    
    
    		 
    
    		function randomFloat(low, high)
    
    		{
    
    		    return low + Math.random() * (high - low);
    
    		}
    
    
    
    		 
    
    		function pixelValue(value)
    
    		{
    
    		    return value + 'px';
    
    		}
    
    		 
    
    		function durationValue(value)
    
    		{
    
    		    return value + 's';
    
    		}
    
    		 
    
    		function createALeaf()
    
    		{
    
        
    
        var leafDiv = document.createElement('div');
    
        var image = document.createElement('img');
    
        
    
    
    
        image.src ='snow' + randomInteger(1, 5) + '.png';
    
    
    
        leafDiv.style.top = "-10px";
    
    
    
    
    
        leafDiv.style.left = pixelValue(randomInteger(0, 1000));
    
        
    
       
    
        var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
    
        
    
        
    
        leafDiv.style.webkitAnimationName = 'fade, drop';
    
        image.style.webkitAnimationName = spinAnimationName;
    
        
    
       
    
        var fadeAndDropDuration = durationValue(randomFloat(5, 11));
    
       
    
        var spinDuration = durationValue(randomFloat(4, 8));
    
         
    
        leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;
    
    
    
        var leafDelay = durationValue(randomFloat(0, 5));
    
        leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;
    
    
    
        image.style.webkitAnimationDuration = spinDuration;
    
     
    
        leafDiv.appendChild(image);
    
     
    
        return leafDiv;
    
    	}
    
     
    
    		window.addEventListener('load', init);
    
    		</script></head>
    
    <body>
    
    	<div id="leafContainer">
    
    		</div>
    
    </body>
    
    </html>

     

    images素材:4个,     能 。。。看清的吧。。

    保存图片方法:鼠标放到雪花上(不要点,点开雪花是白色的你不一定能找到),右键—图片另存为 

     

    喜欢的话点个赞吧~~

     

     

    ————————————————————————调皮的分割线4月9日更——————————————————————————————————————————————

     

    各种通过html写成的类似ppt字体特效,
    鼠标跟随特效
    星空粒子背景,雪花背景,气泡背景,树叶飘落,烟花光束背景,
    轮播图,3D轮播图
    各种卡通动画效果
    成型404界面
    3D六面体(盒子)
    翻书特效
    画轴特效
    翻书特效
    返回顶部小插件
    照片影集特效
    登录界面
    导航栏侧边栏
    各种button样式
     
     
    返回顶部                            3D六面体                                     鼠标绑定跟随                       星空粒子背景
                                             
     
    展开全文
  • HTML+JS 前端雪花飘落

    2022-01-13 10:26:29
    1、概述: 以任意图片作为背景,在背景上添加雪花下落的特效效果,此处使用随机...3、完整实现代码HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
  • 个人网站html5雪花飘落代码JS特效下载

    千次阅读 多人点赞 2019-01-08 18:01:24
    如何给自己的网站/页面添加雪花代码、特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的。...1、唯美浪漫雪花飘落jquery特效代码。演示页面:http://www.lmlblog.com/winter/。代码添加如下: &lt;s...
  • html5雪花飘落代码JS特效

    千次阅读 2018-12-03 09:59:00
    http://www.lmlblog.com/405.html 转载于:https://www.cnblogs.com/fanting/p/10056901.html
  • 圣诞节动态下雪页面雪花飘落代码基于HTML5 Canvas实现,可以用来制作圣诞节主题相关的各种网页特效。蓝色的背景下,白色的雪花纷纷飘落,效果很不错!
  • html5 canvas圣诞雪花飘落动画背景代码是一款适用于圣诞节,元旦,春节等节日网站背景特效。
  • 此源码页为单html代码,新年倒计时,背景雪花飘落效果,倒计时时间日期在JS/app.js文件第21行代码自行修改即可! 此源码页为单html代码,新年倒计时,背景雪花飘落效果,倒计时时间日期在JS/app.js文件第21行...
  • CSS3 3D圣诞树雪花飘落动画,3D圣诞树旋转动画,3D立体圣诞树代码
  • 全屏3d雪花飘落背景动画代码
  • 圣诞节动态下雪页面雪花飘落代码基于HTML5 Canvas实现,可以用来制作圣诞节主题相关的各种网页特效。蓝色的背景下,白色的雪花纷纷飘落,效果很不错!
  • 屏幕掉落雪花H5源码特效,适用于新手开发练手使用。 代码简洁,无冗余广告等;特效简单,容易实现; 下雪特效原生JS+H5实现;
  • 原生js实现新年倒计时喜庆背景带炫酷雪花飘落动画特效代码下载。基于原生JavaScript CSS实现,不依靠任何第三方jQuery库,兼容手机移动端,新年倒计时自动获取,可循环使用,非常简单实用的一款新年倒计时js特效代码...
  • HTML5的canvas雪花飘落特效 一、html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=...
  • 逼真的雪花飘落特效是一款使用HTML5的canvas标签和three.js实现了3D雪花飞舞效果,可拖动鼠标进行旋转。
  • HTML5雪花飘落背景动画,全屏雪花飘落动画代码
  • 本文实例为大家分享了jQuery实现雪花飘落效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset=utf-8> <title>jquery实现...
  • 本文实例讲述了JS实现的雪花飘落特效。分享给大家供大家参考,具体如下: 首先我们要创建一个HTML文件,将其命名为index.html <!DOCTYPE html> <html> <head> <title> Canvas - 雪花特效 <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 550
精华内容 220
关键字:

html雪花飘落代码