🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? ?簡歷模板、學習資料、面試題庫【關注我，都給你】

🍅文末免費獲取源碼🍅

?臨近期末, 你還在為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();

?獲取完整源碼：

大家點贊、收藏、關注、評論啦 、查看下方👇🏻👇🏻👇🏻微信公眾號免費獲取👇🏻👇🏻👇🏻

打卡 文章 更新 180/ ?365天

專欄推薦閱讀：

java項目精品實戰案例《100套》

web前端期末大作業網頁實戰《100套》

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的基于前端HTML+CSS+JS实现2022城市新年贺卡特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。