그림자효과 추가하고 마우스를 올렸을 때 커졌다가 떼면 원상태로 복귀하는 CSS 애니메이션 효과 적용하기
.클래스명 {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* 그림자 효과 추가 */
transition: transform 0.3s, box-shadow 0.3s; /* 그림자 애니메이션 효과 추가 */
}
.클래스명:hover {
transform: scale(1.05); /* 마우스를 올렸을 때 크기를 살짝 키웁니다. */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* 그림자 효과를 더 짙게 만듭니다. */
}
'Programing > CSS' 카테고리의 다른 글
여러 개의 div를 수직이 아닌 수평으로 배치하기 (0) | 2024.04.25 |
---|---|
flex 요소가 2개 일 때 좌우 양쪽으로 밀기 (1) | 2024.04.25 |
부트스트랩 (0) | 2024.02.28 |
목록 스타일 (list-style-type) (0) | 2024.02.26 |
글자 간격 조절 (letter-spacing, word-spacing) (0) | 2024.02.26 |
댓글