基于JavaScript实现新年贺卡特效

目录

动图演示

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

主要代码

图片选择引入：

html, body {            margin: 0;            padding: 0;            overflow: hidden;            background: #000;            font-family: montrrat, sans-rif;            background-image: url(img/pexels-photo-219692.jpeg);            background-size: c四大文明古国over;            background-position: center;        }

css样式

html, body {            margin: 0;            padding: 0;            overflow: hidden;            background: #000;            font-family: montrrat, sans-rif;            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: #d0d0d梢的组词0;            font-weight: bold;        }         #timeleft {            color: #fbfbfb;            font-size: 2.5vw;            text-align: center;            font-family: lora, rif;        }

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 = fal,        newyearalready = fal;     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 conds = 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'}`,            condsleft = `${conds} ${conds > 1 ? 'conds' : 'cond'}`;         if (hours > 0) string = `${hoursleft} &amp; ${minutesleft}`;el        if (minutes > 0) string = `${minutesleft} &amp; ${condsleft}`;el            string = `${condsleft}`;         if (daysleft > 0) string = daysleft + ' days, ' + string;        string += ' until 2020';         timeleft.innerhtml = string;    }     rendertimeleft();     tinterval(function () {        let date = new date();        if (date >= newyear) {            if (!newyearalready) {                year.innerhtml = '2022';                startfireworks = true;                timeleft.innerhtml = 'happy new year!';            }             newyearalready = true;        } el 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.tlength(math.random() * 10 + 15);            velocity.tangle(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.tlength(math.random() * 6 + 2);                velocity.tangle(math.random() * math.pi * 2);            } el {                velocity.tlength(math.random() * 3 + 1);                velocity.tangle(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('moudown', 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: fal });         }    });     tinterval(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 unudobjectcount = 0;        objects.map(o => {            if (!o) {unudobjectcount++;return;}            o.physicsupdate();            o.render();        });        if (unudobjectcount > 100) cleanupobjects();         requestanimationframe(loop);    }     loop();

到此这篇关于基于javascript实现新年贺卡特效的文章就介绍到这了,更多相关javascript新年贺卡特效内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！