基于前端HTML+CSS+JS实现2022城市新年贺卡特效

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在专栏👇🏻👇🏻👇🏻👇🏻

java项目精品实战案例《100套》

web前端期末大作业网页实战《100套》

常见网页设计作业题材有个人、美食、公司、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的2022新年贺卡特效网页设计制作，画面精明，非常适合初学者学习使用。

动图演示：

一款超级炫酷的2022新年快乐html网页特效，霓虹的城市夜景和绚烂的烟花很是特别，该html页面还有交互效果，点击鼠标就会呈现烟花绽放的特效，唯美不过如此。图片可以换成自己喜欢的夜景或人物都可以。

主要代码：

图片选择引入：

html, body {margin: 0;padding: 0;overflow: hidden;background: #000;font-family: Montserrat, sans-serif;background-image: url(img/pexels-photo-219692.jpeg);background-size: cover;background-position: center;}

css样式：

html, body {margin: 0;padding: 0;overflow: hidden;background: #000;font-family: Montserrat, sans-serif;background-image: url(img/pexels-photo-219692.jpeg);background-size: cover;background-position: center;}canvas {mix-blend-mode: lighten;cursor: pointer;}#hero {display: inline;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);mix-blend-mode: color-dodge;}#year {font-size: 30vw;color: #d0d0d0;font-weight: bold;}#timeleft {color: #fbfbfb;font-size: 2.5vw;text-align: center;font-family: Lora, serif;}

Javascirpt:

const canvas = document.createElement('canvas'),context = canvas.getContext('2d'),width = canvas.width = window.innerWidth,height = canvas.height = window.innerHeight,HalfPI = Math.PI / 2,gravity = vector.create(0, 0.35),year = document.getElementById('year'),timeleft = document.getElementById('timeleft'),newyear = new Date('01/01/2020');let objects = [],startFireworks = false,newYearAlready = false;function renderTimeLeft() {let date = new Date();let delta = Math.abs(newyear - date) / 1000;let hours = Math.floor(delta / 3600) % 24;delta -= hours * 3600;let minutes = Math.floor(delta / 60) % 60;delta -= minutes * 60;let seconds = Math.floor(delta % 60) + 1;let string = '';let DaysLeft = Math.floor((newyear - date) / (1000 * 60 * 60 * 24)),HoursLeft = `${hours} ${hours > 1 ? 'hours' : 'hour'}`,MinutesLeft = `${minutes} ${minutes > 1 ? 'minutes' : 'minute'}`,SecondsLeft = `${seconds} ${seconds > 1 ? 'seconds' : 'second'}`;if (hours > 0) string = `${HoursLeft} &amp; ${MinutesLeft}`;elseif (minutes > 0) string = `${MinutesLeft} &amp; ${SecondsLeft}`;elsestring = `${SecondsLeft}`;if (DaysLeft > 0) string = DaysLeft + ' days, ' + string;string += ' until 2020';timeleft.innerHTML = string;}renderTimeLeft();setInterval(function () {let date = new Date();if (date >= newyear) {if (!newYearAlready) {year.innerHTML = '2022';startFireworks = true;timeleft.innerHTML = 'Happy New Year!';}newYearAlready = true;} else renderTimeLeft();}, 500);document.body.appendChild(canvas);function random255() {return Math.floor(Math.random() * 100 + 155);}function randomColor() {let r = random255(),g = random255(),b = random255();return `rgb(${r}, ${g}, ${b})`;}class PhysicsBody {constructor() {objects.push(this);}PhysicsUpdate() {this.lastPosition = this.position.duplicate();this.position.addTo(this.velocity);this.velocity.addTo(gravity);}deleteObject() {objects[objects.indexOf(this)] = undefined;}}class firework extends PhysicsBody {constructor() {super();this.position = vector.create(Math.random() * width, height);let Velocity = vector.create(0, 0);Velocity.setLength(Math.random() * 10 + 15);Velocity.setAngle(Math.PI * 1.35 + Math.random() * Math.PI * 0.30);this.velocity = Velocity;this.trail = Math.floor(Math.random() * 4) != 1;this.trailColor = this.trail ? randomColor() : undefined;this.trailWidth = 2;this.TimeCreated = new Date().getTime();this.TimeExpired = this.TimeCreated + (Math.random() * 5 + 7) * 100;this.BlastParticleCount = Math.floor(Math.random() * 50) + 25;this.funky = Math.floor(Math.random() * 5) == 1;this.exposionColor = randomColor();}draw() {context.strokeStyle = this.trailColor;context.lineWidth = this.trailWidth;let p = this.position,lp = this.lastPosition;context.beginPath();context.moveTo(lp.getX(), lp.getY());context.lineTo(p.getX(), p.getY());context.stroke();}funkyfire() {var funky = this.funky;for (var i = 0; i < Math.floor(Math.random() * 10); i++) {new BlastParticle({ firework: this, funky });}}explode() {var funky = this.funky;for (var i = 0; i < this.BlastParticleCount; i++) {new BlastParticle({ firework: this, funky });}this.deleteObject();}checkExpire() {let now = new Date().getTime();if (now >= this.TimeExpired) this.explode();}render() {if (this.trail) this.draw();if (this.funky) this.funkyfire();this.checkExpire();}}class BlastParticle extends PhysicsBody {constructor({ firework, funky }) {super();this.position = firework.position.duplicate();let Velocity = vector.create(0, 0);if (!this.funky) {Velocity.setLength(Math.random() * 6 + 2);Velocity.setAngle(Math.random() * Math.PI * 2);} else {Velocity.setLength(Math.random() * 3 + 1);Velocity.setAngle(firework.getAngle + Math.PI / 2 - Math.PI * 0.25 + Math.PI * .5);}this.velocity = Velocity;this.color = firework.exposionColor;this.particleSize = Math.random() * 4;this.TimeCreated = new Date().getTime();this.TimeExpired = this.TimeCreated + (Math.random() * 4 + 3.5) * 100;}draw() {context.strokeStyle = this.color;context.lineWidth = this.particleSize;let p = this.position,lp = this.lastPosition;context.beginPath();context.moveTo(lp.getX(), lp.getY());context.lineTo(p.getX(), p.getY());context.stroke();}checkExpire() {let now = new Date().getTime();if (now >= this.TimeExpired) this.deleteObject();}render() {this.draw();this.checkExpire();}}document.body.addEventListener('mousedown', function (e) {let color = randomColor();for (var i = 0; i < Math.floor(Math.random() * 20) + 25; i++) {new BlastParticle({firework: {position: vector.create(e.pageX, e.pageY),velocity: vector.create(0, 0),exposionColor: color },funky: false });}});setInterval(function () {if (!startFireworks) return;for (var i = 0; i < Math.floor(Math.random() * 4); i++) {new firework();}}, 500);function cleanupObjects() {objects = objects.filter(o => o != undefined);}function loop() {context.fillStyle = 'rgba(0,0,0,0.085)';context.fillRect(0, 0, width, height);let unusedObjectCount = 0;objects.map(o => {if (!o) {unusedObjectCount++;return;}o.PhysicsUpdate();o.render();});if (unusedObjectCount > 100) cleanupObjects();requestAnimationFrame(loop);}loop();