My Image

Django 포스팅

[CSS] 애니메이션 효과가 적용된 카드(card) 디자인 모음

Doyeon0430 | 2023년 07월 04일

Django 이미지

이번시간에는 사용자가 나열된 카드(card)에 마우스를 올렸을 때 hover가 작동하고 애니메이션이 적용되는 모션을 소개하겠습니다.

이를 통해 사용자는 홈페이지를 동적으로 변화시키고 시각적인 효과를 나타낼 수 있습니다.

그럼 지금부터 4개의 애니메이션 효과를 소개하겠습니다. 

 

  1. 카드(card) 디자인 - 늘어나는 모션

  2. 카드(card) 디자인 - 내려가는 모션

  3. 카드(card) 디자인 - Y축으로 회전하는 모션

  4. 카드(card) 디자인 - 안으로 들어가는 모션

 

 

1. 카드(card) 디자인 - 늘어나는 모션

첫 번째는 정렬된 카드가 늘어나는 애니메이션 효과입니다.

display를 flex로 설정하여 한 줄로 정렬했습니다.

그리고 카드마다 기본값을 1로 지정해주고 hover가 작동했을 때 flex 값을 3으로 변하게 만들었습니다.

추가적으로 조금 더 자연스러운 모션을 위해 transition을 사용해 0.5초 느리게 나오도록 설정했습니다. 

 

 

 

2. 카드(card) 디자인 - 내려가는 모션

두 번째는 정렬된 카드가 내려가는 애니메이션 효과입니다.

카드에 마우스를 갖다대면 transform이 작동하여 Y축으로 20px 내려가도록 만들었습니다.

여기도 transition을 주고 자연스러운 모션을 만들었습니다.

 

 

 

3. 카드(card) 디자인 - Y축으로 회전하는 모션

세 번째는 정렬된 카드가 회전하는 애니메이션 효과입니다.

transform에 perspective와 rotateY를 설정하여 카드에 마우스를 올리면 Y축으로 30도 꺾이게 만들었습니다.

perspective는 원근거리이며 1500px로 설정했습니다.

box-shadow로 그림자 효과를 추가했습니다.

 

 

 

4. 카드(card) 디자인 - 안으로 들어가는 모션

네 번째는 정렬된 카드가 안으로 들어가는 애니메이션 효과입니다.

scaleborder-radius를 넣어 카드에 크기가 줄어듭니다.

hover가 작동하면 안으로 들어가고 동적인 변화를 줄 수 있기에 자주 사용하는 코드입니다.

 

웹사이트를 제작할 때 여러가지 속성과 키프레임을 활용하여 CSS만으로 다양한 애니메이션 효과를 줄 수 있습니다.

그렇게 이번시간에는 배치에 flex를 주고 카드를 나열시키며 마우스를 올렸을 때 다양한 효과가 작동하도록 설정해봤습니다.

그럼 지금까지 긴 글 읽어주셔서 감사합니다.

댓글 (0)

    댓글이 없습니다.

간편 댓글 작성

My Image My Image My Image My Image