본문 바로가기

그림자효과 추가하고 마우스를 올렸을 때 커졌다가 떼면 원상태로 복귀하는 CSS 애니메이션 효과 적용하기

codeConnection 2024. 2. 29.
.클래스명 {
	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); /* 그림자 효과를 더 짙게 만듭니다. */
}

댓글