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

​ 「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」

 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, 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} & ${MinutesLeft}`;else
        if (minutes > 0) string = `${MinutesLeft} & ${SecondsLeft}`;else
            string = `${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天