使用 Typescript、Tailwind 和 Framer Motion 的動畫工作卡

該專案展示了使用 TypeScript、Tailwind CSS 和 Framer Motion 建立的動態工作卡元件。 這些卡片具有微妙、引人入勝的動畫：懸停時巧妙地出現漸變，並且圖像傾斜，增強了用戶互動。

現場示範

// 偵測深色主題 var iframe = document.getElementById('tweet-1880625972871049553-409'); if (document.body.className.includes('深色主題')) { iframe.src =“https://platform.twitter.com/embed/Tweet.html?id=1880625972871049553&theme=dark” }

原始碼和函式庫

work-card.tsx 元件利用了 shadcn（用於卡片結構）和 21st.dev（用於令人印象深刻的發光效果）等 UI 函式庫。 21st.dev 的發光效果特別值得注意，值得在他們的網站上進一步探索。

work-card.tsx 程式碼片段：

<card className="group relative w-[800px] rounded-3xl p-8 border-none overflow-hidden bg-[#f5f5f5] mb-10">
  <glow className="group-hover:opacity-100 opacity-0" variant="top"></glow>
  <div className="relative z-10">
    {/* Logo and 

以上是使用 Typescript、Tailwind 和 Framer Motion 的動畫工作卡的詳細內容。更多資訊請關注PHP中文網其他相關文章！