使用 Tailwind CSS 创建流星边框动画

<div class="flex h-screen bg-black">  <div class="z-10 m-auto overflow-hidden p-0.5">    <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">      <input type="text" placeholder="join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none"></div>  </div></div>

  <div class="flex h-screen bg-black"><ul><li>我们首先创建一个 flex 容器，以 h-screen（全高）和 bg-black（黑色背景）垂直和水平居中内容。</li></ul><h4>      输入字段的包装</h4><pre class="brush:php;toolbar:false">  <div class="z-10 m-auto overflow-hidden p-0.5"><ul><li>输入字段被包裹在一个 div 中，该 div 具有 z-10 以确保其位于动画边框之上，m-auto 以将其在 flex 容器中居中，并溢出隐藏以将动画边框包含在其边界内。</li></ul><h4>      带有动画边框的输入字段</h4><pre class="brush:php;toolbar:false">  <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black ..."><ul><li>主输入字段设置为固定宽度 500px，高度为 14 tailwind 单位。</li><li>border-white/50 类添加半透明边框，而 rounded-md 则为其提供圆角。</li><li>bg-black 将背景颜色设置为黑色，与容器混合。</li></ul><h4>      创建动画</h4><pre class="brush:php;toolbar:false">  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%"&gt;

  <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none">