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 のグロー エフェクトは特に注目に値し、Web サイトでさらに詳しく調べる価値があります。

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 中国語 Web サイトの他の関連記事を参照してください。