Animierte Arbeitskarte mit Typescript, Tailwind und Framer Motion

Dieses Projekt zeigt dynamische Arbeitskartenkomponenten, die mit TypeScript, Tailwind CSS und Framer Motion erstellt wurden. Die Karten verfügen über eine subtile, ansprechende Animation: Beim Schweben erscheint auf subtile Weise ein Farbverlauf, und das Bild neigt sich, was die Benutzerinteraktion verbessert.

Live-Demo

// Dunkles Thema erkennen 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“ }

Quellcode und Bibliotheken

Die work-card.tsx-Komponente nutzt UI-Bibliotheken wie shadcn (für die Kartenstruktur) und 21st.dev (für den beeindruckenden Leuchteffekt). Der Glow-Effekt von 21st.dev ist besonders hervorzuheben und es lohnt sich, ihn auf deren Website weiter zu erkunden.

work-card.tsxCode-Snippet:

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

Das obige ist der detaillierte Inhalt vonAnimierte Arbeitskarte mit Typescript, Tailwind und Framer Motion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!