Html+Css+js实现带有雪花飘落的许愿墙效果

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 新的一年就要到了 你一定有很多想许下的愿望吧 类似于许愿墙这种的,可以实现一下吗 说时迟 这是快 就开始了许愿墙的一个制作 耗时.....不断改造...升级...当然还可以更好，其他就靠兄弟们自由发挥了

效果预览

​

功能要点介绍

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.updateBound); this.createSnowflakes(); } onResize() { console.log(this.width, 'width'); console.log(this.height, 'height'); this.width = window.innerWidth; this.height = window.innerHeight; this.canvas.width = this.width; this.canvas.height = this.height + 672; } createSnowflakes() { const flakes = window.innerWidth / 4; this.snowflakes = []; for (let s = 0; s < flakes; s++) { this.snowflakes.push(new Snowflake()); } } update() { this.ctx.clearRect(0, 0, this.width, this.height); for (let flake of this.snowflakes) { flake.update(); this.ctx.save(); this.ctx.fillStyle = '#FFF'; this.ctx.beginPath(); this.ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2); this.ctx.closePath(); this.ctx.globalAlpha = flake.alpha; this.ctx.fill(); this.ctx.restore(); } requestAnimationFrame(this.updateBound); } } new Snow();

逻辑文件 (script.js)

//转换时间格式 function formatDated(date) { var date = new Date(date); var YY = date.getFullYear() + '-'; var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()); var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'; var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'; var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); return YY + MM + DD +" "+hh + mm + ss; } function timeChange(){ var datas =[] var idList=0; var timer= setInterval(() => { //控制文字的说明 for( i=0;i<2;i++){ datas.push({ id:idList, name:"歌谣", content:" 在过往的岁月中,我遇到了形形色色的人和事情。有的人坚持，有的人放弃。有的人逆袭，有的人失败。最好的种树是十年前其次是现在。很高兴遇到你,愿你的人生多姿多彩，幸福绵绵，好事连连。歌谣很棒谢谢你的一键三连", time:formatDated(new Date()) }) } idList++ console.log(idList,"idList") if(idList==5){ clearInterval(timer) } var content = document.getElementById("content"); var zIndex = 1; for (var i = 0; i < datas.length; i++) { var data = datas[i]; var div = document.createElement("div"); div.className = "tip1"; div.id = "cc" + data.id; content.appendChild(div); //设置随机数 let num=parseInt(Math.random()*10000) div.innerHTML = '<div class="tip_h" title="双击关闭纸条">' + '<div class="num">第'+num+'条'+ data.time + '</div>' + '<div class="close" title="关闭纸条">×</div>' + '<div class="clr"></div>' + '</div>' + '<div class="tip_c">' + data.content + '</div>' + '<div class="tip_f">' + '<div class="icon">' + '<img src="images/bpic_1.gif" alt="" title="">' + '</div>' + '<div class="name">' + data.name + '</div>' + '<div class="clr"></div>' + '</div>'; // 控制贴纸的位置 var x = parseInt(Math.random() * 1500)+200; var y = parseInt(Math.random() * 700); div.style.left = x + "px"; div.style.top = y + "px"; div.onclick = function () { zIndex++; this.style.zIndex = zIndex; }; var closeDiv = div.children[0]; closeDiv.ondblclick = function () { this.parentNode.style.display = "none"; }; var x = closeDiv.children[1]; x.onclick = function () { this.parentNode.parentNode.style.display = "none"; }; } },2000) } window.onload = timeChange;

样式部分(style.css)

``` body { margin: 0 auto; padding: 0px; font-size: 12px; background: url(../images/bg.gif) repeat center 36px; text-align: center; background-color: #c30230; }

content .tip1, #content .tip2, #content .tip3, #content

.tip4, #content .tip5, #content .tip6, #content .tip7, #content .tip8 { position: absolute; width: 227px; left: 200px; top: 100px; }

content .tip1 .tip_h {

background: url(../images/tip1_h.gif) no-repeat left top;

}

content .tip1 .tiph, #content .tip2 .tiph, #content .tip3 .tip_h,

content .tip4 .tiph, #content .tip5 .tiph, #content .tip6 .tip_h,

#content .tip7 .tiph, #content .tip8 .tiph { width: 227px; padding-top: 45px; height: 23px; text-align: left; cursor: move; }

content .tip1 .tip_c {

background: url(../images/tip1_c.gif) repeat-y;

}

content .tip1 .tipc, #content .tip2 .tipc, #content .tip3 .tip_c,

content .tip4 .tipc, #content .tip5 .tipc, #content .tip6 .tip_c,

#content .tip7 .tipc, #content .tip8 .tipc { width: 200px; padding-left: 12px; padding-right: 15px; min-height: 40px; text-align: left; line-height: 20px; max-height: 160px; word-wrap: break-word; word-break: break-all; overflow: hidden; }

content .tip1 .tip_f {

background: url(../images/tip1_f.gif) no-repeat left top;

}

content .tip1 .tipf, #content .tip2 .tipf, #content .tip3 .tip_f,

#content .tip4 .tipf, #content .tip5 .tipf, #content .tip6 .tip_f,

content .tip7 .tipf, #content .tip8 .tipf {

width: 227px;
height: 53px;
padding-top: 20px;

}

content .close, #content .close2 {

float: left;
font-size: 12px;
cursor: pointer;
color: #000000;

} .clr { clear: both; overflow: auto; display: block; height: 0px; }

content .icon {

float: left;
width: 35px;
padding-left: 15px;
height: 35px;
text-align: center;

}

content .name {

float: right;
padding-right: 15px;
text-align: right;
font-size: 14px;
line-height: 35px;
color: #C0F;

}

content .num {

float: left;
padding-left: 7px;
width: 195px;

} ```

骨架部分(html)

```

　 rel="stylesheet" type="text/css" href="./css/style.css">

```

效果演示

总结

对于南方的人来说 是很少看见雪花的 这篇就用来祝福大家新年快乐了~

​