文字动画效果 Tailwind网站组件

<section id="t5y7u9i2" class="bg-black text-green-400 font-mono py-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center"> <div class="mb-8"> <span class="text-2xl">root@system:~$ </span> <span id="n6b4v8m1" class="text-2xl"></span> <span class="animate-pulse">|</span> </div> <h1 class="text-4xl md:text-6xl font-bold mb-6">终端美学</h1> <p class="text-xl mb-8 opacity-80">代码即艺术，逻辑即美感</p> <div class="bg-gray-900 rounded-lg p-6 text-left max-w-2xl mx-auto"> <div class="flex items-center mb-4"> <div class="flex space-x-2"> <div class="w-3 h-3 bg-red-500 rounded-full"></div> <div class="w-3 h-3 bg-yellow-500 rounded-full"></div> <div class="w-3 h-3 bg-green-500 rounded-full"></div> </div> </div> <div class="space-y-2 text-sm"> <div><span class="text-blue-400">function</span> <span class="text-yellow-400">createArt</span>() {</div> <div class="ml-4"><span class="text-purple-400">return</span> <span class="text-green-400">'Beautiful Code'</span>;</div> <div>}</div> </div> </div> </div> </div> </section> <script>
(function() {
                var text = "echo 'Welcome to the Matrix'";
                var element = document.getElementById('n6b4v8m1');
                var index = 0;
                
                function typeWriter() {
                    if (index < text.length) {
                        element.textContent += text.charAt(index);
                        index++;
                        setTimeout(typeWriter, 100);
                    }
                }
                
                typeWriter();
            })();
</script>