Tailwind CSS로 흐릿한 애니메이션 모양을 만드는 방법
23399 단어 tailwindcss
이 기사에서는 Tailwind CSS를 사용하여 흐릿한 애니메이션 배경 모양을 만드는 방법을 살펴보겠습니다. CSS 필터, 혼합 혼합 모드 및 사용자 지정 애니메이션을 조합하여 수행합니다.
시작하겠습니다.
그러나 그 전에 여기에 우리가 만들려는 것에 대한 약간의 데모가 있습니다.
먼저 Tailwind CSS로 Next.js 프로젝트를 생성합니다.
npx create-next-app -e with-tailwindcss my-project-name
이제 배경에서 애니메이션 배경 모양의 효과를 낼 수 있도록 몇 가지 목업 디자인을 만들 것입니다.
index.js 안에 다음 코드를 작성합니다.
import Head from 'next/head'
export default function Home() {
return (
<div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className="text-5xl absolute top-6 font-extrabold text-violet-500">Animated Blurry Background Shapes</h1>
<div className="bg-gray-50 w-full flex items-center justify-center px-16">
<div className="relative w-full max-w-xl">
/////// Add the three divs below this comment /////////
<div className="m-8 relative space-y-4">
<div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
<div className="flex-1">
<div className="h-4 w-48 bg-gray-300 rounded"></div>
</div>
<div>
<div className="w-24 h-6 rounded-lg bg-purple-300"></div>
</div>
</div>
<div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
<div className="flex-1">
<div className="h-4 w-56 bg-gray-300 rounded"></div>
</div>
<div>
<div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
</div>
</div>
<div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
<div className="flex-1">
<div className="h-4 w-44 bg-gray-300 rounded"></div>
</div>
<div>
<div className="w-28 h-6 rounded-lg bg-pink-300"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
이제 배경색을 bg-gray-50으로 변경하고 흐릿한 애니메이션 모양을 만드는 데 집중할 수 있도록 div에 불투명도를 0으로 지정하여 이 디자인을 숨길 것입니다.
그런 다음 배경색이 다른 동일한 모양의 세 개의 div를 만들고 상위 div에도 상대 클래스를 할당합니다.
그리고 디자인은 다음과 같이 보일 것입니다.
흐릿한 배경 모양
<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 "></div>
그런 다음 이러한 모양을 흐리게 만들고 세 가지 색상을 혼합하기 위해 세 가지 클래스 mix-blend-multiply , filter , blur-xl 을 세 개의 div 각각에 추가하고 불투명도-70 클래스도 추가하여 깔끔하게 보이도록 합니다.
이제 코드는 다음과 같습니다.
import Head from 'next/head'
export default function Home() {
return (
<div className="flex min-h-screen bg-gray-50 flex-col items-center justify-center py-2">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className="text-5xl absolute top-6 font-extrabold text-violet-500">Animated Blurry Background Shapes</h1>
<div className="bg-gray-50 w-full flex items-center justify-center px-16">
<div className="relative w-full max-w-xl">
<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full opacity-70 "></div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full opacity-70 "></div>
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full opacity-70 "></div>
<div className="m-8 relative space-y-4 opacity-0">
<div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
<div className="flex-1">
<div className="h-4 w-48 bg-gray-300 rounded"></div>
</div>
<div>
<div className="w-24 h-6 rounded-lg bg-purple-300"></div>
</div>
</div>
<div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
<div className="flex-1">
<div className="h-4 w-56 bg-gray-300 rounded"></div>
</div>
<div>
<div className="w-20 h-6 rounded-lg bg-yellow-300"></div>
</div>
</div>
<div className="p-5 bg-white rounded-lg flex items-center justify-between space-x-8">
<div className="flex-1">
<div className="h-4 w-44 bg-gray-300 rounded"></div>
</div>
<div>
<div className="w-28 h-6 rounded-lg bg-pink-300"></div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
그리고 디자인은 다음과 같이 보일 것입니다.
애니메이션 흐린 배경
그래서 마지막으로 burry 모양에 애니메이션을 추가하는 것입니다.
이를 위해 tailwindcss.config.js를 열고 다음과 같이 blob 애니메이션을 추가합니다.
module.exports = {
theme: {
extend: {
animation: {
blob: "blob 7s infinite",
},
keyframes: {
blob: {
"0%": {
transform: "translate(0px, 0px) scale(1)",
},
"33%": {
transform: "translate(30px, -50px) scale(1.1)",
},
"66%": {
transform: "translate(-20px, 20px) scale(0.9)",
},
"100%": {
transform: "tranlate(0px, 0px) scale(1)",
},
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
이제 프로젝트가 거의 마무리되었지만 한 가지 문제가 있습니다.
문제는 모든 흐릿한 배경이 함께 움직이는데 우리는 그것을 원하지 않습니다.
따라서 이 문제를 극복하기 위해 다른 두 div의 애니메이션을 지연시킬 것입니다.
이를 위해 스타일 폴더 내의 global.css 파일을 열고 이러한 클래스를 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
}
이제 animate-blob 클래스와 이러한 클래스를 다음과 같이 2nd 및 3rd div에 추가합니다.
<div className="absolute top-0 -left-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob ">
</div>
<div className="absolute top-0 -right-4 w-72 h-72 bg-yellow-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
</div>
<div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000">
</div>
그리고 짜잔 🎉🎉 우리는 이 프로젝트를 한 시간도 채 안되어 구축합니다.
결론
다음 프로젝트를 위해 이 흐릿한 애니메이션 배경 모양을 만들 수 있기를 바랍니다. 이 프로젝트가 마음에 든다면 저를 팔로우하고 공유해주세요 😉.
이 프로젝트가 마음에 드셨으면 좋겠고 ✌️ 이 블로그 게시물을 공유해 주시면 감사하겠습니다.
이것이 도움이 되었다고 생각되면 제 블로그 웹사이트nextjsdev.com를 방문하여 Twitter에서 저를 팔로우하고 LinkedIn에서 저와 연결하십시오.
어딘가에 갇혀 솔루션을 찾을 수 없는 경우 여기에서 완성된Github Repo을 확인할 수 있습니다.
시간을 내어 이 프로젝트를 읽어주셔서 감사합니다. 마음에 들면 Twitter, Facebook 또는 기타 소셜 미디어에서 공유하고 저를 태그해 주세요.
다음 블로그에서 만나요✌️. 그때까지 돌보고 프로젝트를 계속 구축하십시오.
유용한 링크:
나와 연결:
Reference
이 문제에 관하여(Tailwind CSS로 흐릿한 애니메이션 모양을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/raivikas/how-to-build-blurry-animated-shapes-with-tailwind-css-2nd1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
