层叠波纹效果 Tailwind网站组件

<section id="w4e8r2t6" class="relative bg-gradient-to-br from-blue-600 to-purple-700 text-white overflow-hidden"> <div id="v9n3m1q5" class="absolute inset-0 opacity-30"></div> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24"> <div class="flex flex-col md:flex-row justify-between items-center"> <div class="mb-8 md:mb-0 md:w-1/2"> <h1 class="text-4xl md:text-6xl font-bold mb-4">流动之美</h1> <p class="text-lg opacity-90">感受数字世界的韵律与节拍</p> </div> <div class="md:w-1/2 text-right"> <nav class="flex flex-wrap justify-center md:justify-end gap-4"> <a href="#" class="bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full hover:bg-white/20 transition-colors">波纹</a> <a href="#" class="bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full hover:bg-white/20 transition-colors">流动</a> <a href="#" class="bg-white/10 backdrop-blur-sm px-6 py-3 rounded-full hover:bg-white/20 transition-colors">韵律</a> </nav> </div> </div> </div> </section> <script>
(function() {
                var container = document.getElementById('v9n3m1q5');
                var waves = [];
                var animationId;
                
                function createWave() {
                    var wave = document.createElement('div');
                    wave.className = 'absolute rounded-full border-2 border-white pointer-events-none';
                    wave.style.width = '20px';
                    wave.style.height = '20px';
                    wave.style.left = Math.random() * 100 + '%';
                    wave.style.top = Math.random() * 100 + '%';
                    wave.style.opacity = '0.5';
                    container.appendChild(wave);
                    
                    waves.push({
                        element: wave,
                        scale: 1,
                        opacity: 0.5
                    });
                }
                
                function animateWaves() {
                    for (var i = waves.length - 1; i >= 0; i--) {
                        var wave = waves[i];
                        wave.scale += 0.02;
                        wave.opacity -= 0.005;
                        
                        wave.element.style.transform = 'scale(' + wave.scale + ')';
                        wave.element.style.opacity = wave.opacity;
                        
                        if (wave.opacity <= 0) {
                            container.removeChild(wave.element);
                            waves.splice(i, 1);
                        }
                    }
                    
                    if (Math.random() < 0.05 && waves.length < 10) {
                        createWave();
                    }
                    
                    animationId = requestAnimationFrame(animateWaves);
                }
                
                animateWaves();
            })();
</script>