Html+Css+js实现带有雪花飘落的许愿墙效果，首发10万字前端开发实战文档

功能要点介绍

---

1雪花飘落的代码是js控制的，可自行修改

2许愿墙的贴纸是for循环控制的,可自行修改

3文字是datas数组控制的，可以自行修改

代码部分

---

雪花逻辑部分（index.js）

---

class Snowflake {

constructor() {

this.x = 0;

this.y = 0;

this.vx = 0;

this.vy = 0;

this.radius = 0;

this.alpha = 0;

this.reset();

}

reset() {

this.x = this.randBetween(0, window.innerWidth);

this.y = this.randBetween(0, -window.innerHeight + 672);

this.vx = this.randBetween(-3, 3);

this.vy = this.randBetween(2, 5);

this.radius = this.randBetween(1, 4);

this.alpha = this.randBetween(0.1, 0.9);

}

randBetween(min, max) {

return min + Math.random() * (max - min);

}

update() {

this.x += this.vx;

this.y += this.vy;

if (this.y + this.radius > window.innerHeight) {

this.reset();

}

}

}

class Snow {

constructor() {

this.canvas = document.createElement(‘canvas’);

this.ctx = this.canvas.getContext(‘2d’);

document.body.appendChild(this.canvas);

window.addEventListener(‘resize’, () => this.onResize());

this.onResize();

this.updateBound = this.update.bind(this);

requestAnimationFrame(this.updat