Django 포스팅
Doyeon0430 | 2023년 07월 04일
이번시간에는 사용자가 나열된 카드(card)에 마우스를 올렸을 때 hover가 작동하고 애니메이션이 적용되는 모션을 소개하겠습니다.
이를 통해 사용자는 홈페이지를 동적으로 변화시키고 시각적인 효과를 나타낼 수 있습니다.
그럼 지금부터 4개의 애니메이션 효과를 소개하겠습니다.
첫 번째는 정렬된 카드가 늘어나는 애니메이션 효과입니다.
display를 flex로 설정하여 한 줄로 정렬했습니다.
그리고 카드마다 기본값을 1로 지정해주고 hover가 작동했을 때 flex 값을 3으로 변하게 만들었습니다.
추가적으로 조금 더 자연스러운 모션을 위해 transition을 사용해 0.5초 느리게 나오도록 설정했습니다.
두 번째는 정렬된 카드가 내려가는 애니메이션 효과입니다.
카드에 마우스를 갖다대면 transform이 작동하여 Y축으로 20px 내려가도록 만들었습니다.
여기도 transition을 주고 자연스러운 모션을 만들었습니다.
세 번째는 정렬된 카드가 회전하는 애니메이션 효과입니다.
transform에 perspective와 rotateY를 설정하여 카드에 마우스를 올리면 Y축으로 30도 꺾이게 만들었습니다.
perspective는 원근거리이며 1500px로 설정했습니다.
box-shadow로 그림자 효과를 추가했습니다.
네 번째는 정렬된 카드가 안으로 들어가는 애니메이션 효과입니다.
scale과 border-radius를 넣어 카드에 크기가 줄어듭니다.
hover가 작동하면 안으로 들어가고 동적인 변화를 줄 수 있기에 자주 사용하는 코드입니다.
웹사이트를 제작할 때 여러가지 속성과 키프레임을 활용하여 CSS만으로 다양한 애니메이션 효과를 줄 수 있습니다.
그렇게 이번시간에는 배치에 flex를 주고 카드를 나열시키며 마우스를 올렸을 때 다양한 효과가 작동하도록 설정해봤습니다.
그럼 지금까지 긴 글 읽어주셔서 감사합니다.
댓글 (0)
간편 댓글 작성
