动态粒子背景 Tailwind网站组件

<section id="k9m2x7n1" class="relative bg-gray-900 text-white overflow-hidden"> <canvas id="c8p5q3w2" class="absolute inset-0 w-full h-full"></canvas> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20"> <div class="text-center"> <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-600"> 科技前沿 </h1> <p class="text-xl text-gray-300 mb-8">人工智能驱动的未来已来</p> <button class="bg-gradient-to-r from-blue-500 to-purple-600 px-8 py-4 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all transform hover:scale-105"> 探索技术 </button> </div> </div> </section> <script>
(function() {
                var canvas = document.getElementById('c8p5q3w2');
                var ctx = canvas.getContext('2d');
                var particles = [];
                
                function resizeCanvas() {
                    canvas.width = canvas.offsetWidth;
                    canvas.height = canvas.offsetHeight;
                }
                
                function createParticle() {
                    return {
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        vx: (Math.random() - 0.5) * 0.5,
                        vy: (Math.random() - 0.5) * 0.5,
                        size: Math.random() * 2 + 1
                    };
                }
                
                function animate() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.fillStyle = 'rgba(59, 130, 246, 0.5)';
                    
                    for (var i = 0; i < particles.length; i++) {
                        var p = particles[i];
                        p.x += p.vx;
                        p.y += p.vy;
                        
                        if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
                        if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
                        
                        ctx.beginPath();
                        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
                        ctx.fill();
                    }
                    
                    requestAnimationFrame(animate);
                }
                
                resizeCanvas();
                for (var i = 0; i < 50; i++) {
                    particles.push(createParticle());
                }
                animate();
                
                window.addEventListener('resize', resizeCanvas);
            })();
</script>