使用 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 代码片段：

<code class="language-typescript">
<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 </code>

以上是使用 Typescript、Tailwind 和 Framer Motion 的动画工作卡的详细内容。更多信息请关注PHP中文网其他相关文章！