动态渐变边框 Tailwind网站组件

<section id="q8w2e5r7" class="bg-gray-900 py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="relative"> <div class="absolute inset-0 bg-gradient-to-r from-pink-500 via-purple-500 via-blue-500 to-green-500 rounded-3xl p-1"></div> <div class="relative bg-gray-900 rounded-3xl p-8"> <div class="text-center text-white"> <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-blue-400"> 动态边界 </h1> <p class="text-xl text-gray-300 mb-8">突破传统，拥抱变化</p> <div class="flex flex-wrap justify-center gap-4"> <span class="bg-gradient-to-r from-pink-500 to-purple-600 px-4 py-2 rounded-full text-sm">创新</span> <span class="bg-gradient-to-r from-blue-500 to-green-600 px-4 py-2 rounded-full text-sm">突破</span> <span class="bg-gradient-to-r from-yellow-500 to-red-600 px-4 py-2 rounded-full text-sm">变革</span> </div> </div> </div> </div> </div> </section> <style>
#q8w2e5r7 .absolute.inset-0 {
                animation: borderRotate 3s linear infinite;
                background: conic-gradient(from 0deg, #ec4899, #8b5cf6, #3b82f6, #10b981, #f59e0b, #ef4444, #ec4899);
            }
            
            @keyframes borderRotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
</style>