用AI辅助编程写一个烟花绽放的页面(deepseek+vscode)

指令如下：

1.帮我用html设计一个放烟花的页面，要求当我点击屏幕任意位置都可以触发烟花生成，并且烟花从页面底部开始直线上升，速度由快到慢，最终到达我点击的精确位置，确保烟花绽放的地方和我点击的地方相同

2.我需要在此基础上，烟花到达点击位置后瞬间绽放，并生成多个从烟花中心向外飞散的小烟花，形成放射状爆炸，并有生命周期的逐渐消失，模拟真实烟花爆炸的状态

3.我希望烟花上升和绽放后的颜色是统一的，颜色随机选择自定义的纯色列表，烟花绽放后的小烟花生命周期更长一点，小烟花更多一点

4.我有一张命名为sky.jpg的图片，请帮我添加到这份代码当中充当背景（这步看个人需求，将sky.jpg放入html同级目录下）

最终呈现效果

 

 源代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>烟花效果</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-image: url('sky.jpg');
            background-size: cover;
            background-position: center;
        }
        .firework {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #fff;
            border-radius: 50%;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            animation: rise 1s ease-out forwards;
        }
        @keyframes rise {
            0% {
                bottom: 0;
                opacity: 1;
            }
            100% {
                bottom: var(--target-y);
                opacity: 0;
            }
        }
        .explosion {
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            opacity: 1;
        }
    </style>
</head>
<body>
    <script>
        // 自定义颜色列表
        const colors = ['#FF5733', '#33FF57', '#3357FF', '#FF33A1', '#33FFF5', '#F5FF33'];

        document.addEventListener('click', function(event) {
            const x = event.clientX;
            const y = event.clientY;

            // 随机选择一个颜色
            const fireworkColor = colors[Math.floor(Math.random() * colors.length)];

            // 创建烟花
            const firework = document.createElement('div');
            firework.classList.add('firework');
            firework.style.left = `${x}px`;
            firework.style.backgroundColor = fireworkColor; // 设置烟花颜色
            firework.style.setProperty('--target-y', `${window.innerHeight - y}px`);
            document.body.appendChild(firework);

            // 烟花到达目标位置后爆炸
            setTimeout(() => {
                firework.remove(); // 移除上升的烟花

                // 生成多个小烟花，形成放射状爆炸
                const numParticles = 150; // 增加小烟花数量
                for (let i = 0; i < numParticles; i++) {
                    const angle = (Math.PI * 2 * i) / numParticles; // 计算角度
                    const distance = Math.random() * 150 + 100; // 随机飞散距离

                    const particle = document.createElement('div');
                    particle.classList.add('explosion');
                    particle.style.left = `${x}px`;
                    particle.style.top = `${y}px`;
                    particle.style.backgroundColor = fireworkColor; // 使用统一的颜色
                    document.body.appendChild(particle);

                    // 设置小烟花的飞散动画
                    const deltaX = Math.cos(angle) * distance;
                    const deltaY = Math.sin(angle) * distance;
                    particle.animate([
                        { transform: `translate(0, 0)`, opacity: 1 },
                        { transform: `translate(${deltaX}px, ${deltaY}px)`, opacity: 0 }
                    ], {
                        duration: 2000 + Math.random() * 1000, // 延长生命周期
                        easing: 'ease-out',
                        fill: 'forwards'
                    });

                    // 小烟花生命周期结束后移除
                    setTimeout(() => {
                        particle.remove();
                    }, 3000); // 延长移除时间
                }
            }, 1000);
        });
    </script>
</body>
</html>

　　

 

posted @ 2025-03-07 17:18  Wild-bokeyuan  阅读(121)  评论(0)    收藏  举报