Typescript, Tailwind 및 Framer Motion을 사용한 애니메이션 작업 카드

이 프로젝트는 TypeScript, Tailwind CSS 및 Framer Motion으로 구축된 동적 작업 카드 구성 요소를 보여줍니다. 카드에는 미묘하고 매력적인 애니메이션이 포함되어 있습니다. 마우스를 올리면 그라데이션이 미묘하게 나타나고 이미지가 기울어져 사용자 상호 작용이 향상됩니다.

라이브 데모

// 어두운 테마 감지 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" }

소스 코드 및 라이브러리

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!