Kad Kerja Animasi menggunakan Typescript, Tailwind dan Framer Motion

Projek ini mempamerkan komponen kad kerja dinamik yang dibina dengan TypeScript, Tailwind CSS dan Framer Motion. Kad ini menampilkan animasi yang halus dan menarik: kecerunan muncul secara halus pada tuding, dan imej dicondongkan, meningkatkan interaksi pengguna.

Demo Langsung

// Kesan tema gelap var iframe = document.getElementById('tweet-1880625972871049553-409'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1880625972871049553&theme=dark" }

Kod Sumber & Perpustakaan

Komponen work-card.tsx memanfaatkan perpustakaan UI seperti shadcn (untuk struktur kad) dan 21st.dev (untuk kesan cahaya yang mengagumkan). Kesan cahaya daripada 21st.dev amat patut diberi perhatian dan patut diterokai dengan lebih lanjut di tapak web mereka.

work-card.tsx Coretan Kod:

<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>

Atas ialah kandungan terperinci Kad Kerja Animasi menggunakan Typescript, Tailwind dan Framer Motion. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!