html雪花飘落代码

html实现雪花飘落 千次阅读

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)

前端

更多相关内容

唯美雪景雪花飘落效果代码.zip
2019-05-23 15:37:43

唯美雪景雪花飘落效果代码基于ThreeCanvas.js和Snow.js制作，效果逼真，雪景背景图片可根据实际需要自行更换，雪花飘落有鼠标跟随特效。

收起
HTML5 canvas实现雪花飘落特效
2020-09-28 04:19:34

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

收起
如何使用HTML5 canvas实现雪花飘落
千次阅读 2021-06-24 03:06:29

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

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

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

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

最终效果图如下：

图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;

}

此时效果如如下：

注意：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;

此时效果如如下：

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()函数，效果如下：

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

注意：由于这里需要绘制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=...

效果图

各位朋友大家上午好！

今天给大家带来的是超酷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雪花飘落特效特效代码
2021-03-20 01:35:47

HTML5 canvas炫酷3D雪花飘落特效

收起
html雪花飘落效果.zip
2020-01-03 15:58:39

Html/css/js 页面雪花飘落 动画

收起
html5+css3实现的超酷雪花飘落特效特效代码
2021-03-20 03:14:22

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六面体鼠标绑定跟随星空粒子背景

有需要的私聊我，咸鱼在售，five软妹币～～～

咸鱼（静静静静静rj）： https://market.m.taobao.com/app/idleFish-F2e/IdleFishWeexPersonalPage/PersonalHome?userid=2571872530&ut_sk=1.XSCipxxIJuEDAOncPqzi9sXi_21407387_1586154452710.Copy.mypage.2571872530.2571872530&type=1&wh_weex=true&forceFlush=1

收起

展开全文

css3

HTML+JS 前端雪花飘落
2022-01-13 10:26:29

1、概述：以任意图片作为背景，在背景上添加雪花下落的特效效果，此处使用随机...3、完整实现代码： HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

收起

前端 javascript
个人网站html5雪花飘落代码JS特效下载
千次阅读 多人点赞 2019-01-08 18:01:24

如何给自己的网站/页面添加雪花代码、特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的。...1、唯美浪漫雪花飘落jquery特效代码。演示页面：http://www.lmlblog.com/winter/。代码添加如下： <s...

收起

3D特效
html5雪花飘落代码JS特效
千次阅读 2018-12-03 09:59:00

http://www.lmlblog.com/405.html 转载于:https://www.cnblogs.com/fanting/p/10056901.html

收起
圣诞节动态下雪页面雪花飘落特效代码
2021-03-20 03:17:19

圣诞节动态下雪页面雪花飘落代码基于HTML5 Canvas实现，可以用来制作圣诞节主题相关的各种网页特效。蓝色的背景下，白色的雪花纷纷飘落，效果很不错！

收起
html5 canvas圣诞雪花飘落动画背景代码
2020-06-11 23:02:03

html5 canvas圣诞雪花飘落动画背景代码是一款适用于圣诞节，元旦，春节等节日网站背景特效。

收起
此源码页为单html纯代码，新年倒计时，背景雪花飘落效果，倒计时时间日期在JS/app.js文件第21行代码自行...
2022-03-08 15:34:16

此源码页为单html纯代码，新年倒计时，背景雪花飘落效果，倒计时时间日期在JS/app.js文件第21行代码自行修改即可！此源码页为单html纯代码，新年倒计时，背景雪花飘落效果，倒计时时间日期在JS/app.js文件第21行...

收起
CSS3 3D圣诞树雪花飘落动画.zip
2019-05-23 20:21:14

CSS3 3D圣诞树雪花飘落动画，3D圣诞树旋转动画，3D立体圣诞树代码。

收起
全屏3d雪花飘落背景动画代码
2020-12-16 23:42:34

全屏3d雪花飘落背景动画代码

收起
圣诞节动态下雪页面雪花飘落代码.zip
2019-07-04 20:56:14

圣诞节动态下雪页面雪花飘落代码基于HTML5 Canvas实现，可以用来制作圣诞节主题相关的各种网页特效。蓝色的背景下，白色的雪花纷纷飘落，效果很不错！

收起
雪花屏幕飘落H5特效代码
2019-12-19 10:39:39

屏幕掉落雪花H5源码特效，适用于新手开发练手使用。代码简洁，无冗余广告等；特效简单，容易实现；下雪特效原生JS+H5实现；

收起
原生js实现喜庆背景带炫酷雪花飘落动画特效代码.zip
2019-07-11 10:50:47

原生js实现新年倒计时喜庆背景带炫酷雪花飘落动画特效代码下载。基于原生JavaScript CSS实现，不依靠任何第三方jQuery库，兼容手机移动端，新年倒计时自动获取，可循环使用，非常简单实用的一款新年倒计时js特效代码...

收起
HTML5的canvas雪花飘落特效
2022-02-14 03:22:09

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=...

收起

chrome css
逼真的雪花飘落特效特效代码
2021-03-20 02:16:25

逼真的雪花飘落特效是一款使用HTML5的canvas标签和three.js实现了3D雪花飞舞效果，可拖动鼠标进行旋转。

收起
HTML5雪花飘落背景动画
2021-05-01 14:42:23

HTML5雪花飘落背景动画，全屏雪花飘落动画代码。

收起
jQuery实现雪花飘落效果
2021-01-19 03:22:35

本文实例为大家分享了jQuery实现雪花飘落效果的具体代码，供大家参考，具体内容如下效果展示：源码展示： <!doctype html> <html> <head> <meta charset=utf-8> <title>jquery实现...

收起
JS实现的雪花飘落特效示例
2021-01-19 21:11:30

本文实例讲述了JS实现的雪花飘落特效。分享给大家供大家参考，具体如下：首先我们要创建一个HTML文件，将其命名为index.html <!DOCTYPE html> <html> <head> <title> Canvas - 雪花特效 <...

收起

唯美雪景雪花飘落效果代码.zip

HTML5 canvas实现雪花飘落特效

如何使用HTML5 canvas实现雪花飘落

超酷html5雪花飘落特效源码

HTML5 唯美雪花飘落

HTML5 canvas炫酷3D雪花飘落特效特效代码

html雪花飘落效果.zip

html5+css3实现的超酷雪花飘落特效特效代码

html+CSS样式：雪花飘落背景（雪花为图片）

喜欢的话点个赞吧～～

HTML+JS 前端雪花飘落

个人网站html5雪花飘落代码JS特效下载

html5雪花飘落代码JS特效

圣诞节动态下雪页面雪花飘落特效代码

html5 canvas圣诞雪花飘落动画背景代码

此源码页为单html纯代码，新年倒计时，背景雪花飘落效果，倒计时时间日期在JS/app.js文件第21行代码自行...

CSS3 3D圣诞树雪花飘落动画.zip

全屏3d雪花飘落背景动画代码

圣诞节动态下雪页面雪花飘落代码.zip

雪花屏幕飘落H5特效代码

原生js实现喜庆背景带炫酷雪花飘落动画特效代码.zip

HTML5的canvas雪花飘落特效

逼真的雪花飘落特效特效代码

HTML5雪花飘落背景动画

jQuery实现雪花飘落效果

JS实现的雪花飘落特效示例

html雪花飘落代码