新年Html动态特效祝福送给你

这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。

由于原始代码已经是一个完整的解决方案，以下是一个简化的HTML代码实例，用于创建一个新年祝福的动态文字特效：




<!DOCTYPE html>
<html>
<head>
    <title>新年祝福特效</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #222;
            color: #fff;
            font-family: Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;
        const particles = [];
 
        function Particle() {
            this.x = Math.random() * width;
            this.y = Math.random() * height;
            this.velocity = {
                x: (Math.random() - 0.5) * 5,
                y: (Math.random() - 0.5) * 5
            };
            this.color = '#fff';
            this.size = Math.random() * 10 + 10;
            this.life = 1;
        }
 
        Particle.prototype.update = function() {
            this.x += this.velocity.x;
            this.y += this.velocity.y;
            this.life -= 0.01;
        };
 
        Particle.prototype.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.globalAlpha = this.life;
            ctx.fill();
        };
 
        function init() {
            particles.push(new Particle());
        }
 
        function animate() {
            ctx.clearRect(0, 0, width, height);
            particles.forEach((particle, index) => {
                particle.update();
                particle.draw();
                if (particle.life <= 0) {
                    particles.splice(index, 1);
                }
            });
            requestAnimationFrame(animate);
        }
 
        function newYear() {
            ctx.font = '60px Arial';
            ctx.fillStyle = '#fff';
            ctx.textAlign = 'center';
            ctx.fillText('新年快乐', width / 2, height / 2);
        }
 
        newYear();
        setInterval(init, 30);
        a

新年Html动态特效祝福送给你

评论已关闭

推荐阅读