1、概述：

以任意图片作为背景，在背景上添加雪花下落的特效效果，此处使用随机大小的彩色雪花实现。

2、实现功能：

（1）雪花随机出现并随机消失；

（2）雪花出现时大小随机；

（3）雪花颜色逐渐变淡并消失；

（4）雪花消失后删除其对象，减轻系统负担。

3、完整实现代码：

HTML:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: black;}</style>
</head><body><script src="雪花.js"></script>
</body></html>

JS:

function flake() {//先写静态再写动态//一朵雪花在屏幕内随即摆放var f = document.createElement("img");f.src = "flake.png";//随机问题用随机函数//先获取屏幕的宽高，在用随机函数得到一个随机的X Y值var width = document.documentElement.clientWidth;var heigh = document.documentElement.clientHeight;//获取屏幕随机坐标var left = Math.random() * width;var top = Math.random() * heigh;//  alert(width)f.style.position = "absolute";f.style.left = left + "px";f.style.top = top + "px";//随即缩放f.style.transform = "scale(" + Math.random() / 2 + ")"//将这个标签插入到body中document.body.appendChild(f);//在JS中可以使用方法里面的方法function down() {top++;left++;f.style.left = left + "px";f.style.top = top + "px";if (top > heigh) {top = -100;}if (left > width) {left = -100;}}setInterval(down, 20)
}
//下落
function down() {f.style.top++
}
setInterval(down, 1000)
for (var i = 0; i < 50; i++) {flake()
}

4、实现效果

HTML+JS 前端雪花飘落相关推荐

JS实现雪花飘落特效效果
1.概述: 以任意图片作为背景,在背景上添加雪花下落的特效效果,此处使用随机颜色.随机大小的彩色雪花实现. 2.效果实现功能: (1)雪花随机出现并随机消失: (2)雪花出现时大小随机: (3)雪花颜 ...
html5雪花飘落,使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码代码如下: function start(){ var array=new Array(); var canvas=document.g ...
原生JS实现雪花飘落的效果
目录 1.代码 index.html <!DOCTYPE html> <html> <head><meta charset="UTF-8" ...
js实现雪花效果(超简单)
打个广告,最底下的公众号,可以每天领外卖红包.打车优惠券还有96折充值电费等,需要的可以关注一下哦使用js实现雪花飘落效果,话不多说直接上代码 <!DOCTYPE html> <h ...
JS实现逼真的雪花飘落特效
逼真的雪花飘落特效效果图: 图片素材 : --> ParticleSmoke.png 代码如下,复制即可使用: <!doctype html> <html> <h ...
Html+Css+js实现带有雪花飘落的许愿墙效果
目录前言导语效果预览功能要点介绍代码部分雪花逻辑部分(index.js) 逻辑文件 (script.js) 样式部分(style.css) 骨架部分(html) 效果演示总结下载地址 ...
three.js 几何体-组合网格_ThreeJS 粒子系统实现雪花飘落动画
ThreeJS 粒子系统中,THREE.Points是用来创建点的类,也用来批量管理粒子,基于几何体的顶点来渲染每个粒子.这个类的构造函数有两个参数,geometry(几何体)和material(材质 ...
HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 c
HTML5七夕情人节表白网页❤新年倒计时+白色雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表 ...
HTML5七夕情人节表白网页(圣诞雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤圣诞雪花飘落❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序 ...

HTML+JS 前端雪花飘落

1、概述：

2、实现功能：

3、完整实现代码：

HTML:

JS:

4、实现效果

HTML+JS 前端雪花飘落相关推荐

最新文章

热门文章