728x90
300x250
SMALL
호버 효과를 사용하여 마우스를 올리면 시각적으로 변하는 인터렉티브한 UI를 만들어 보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>호버 효과</title>
<style>
.card {
width: 200px;
height: 300px;
background-color: #3498db;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.1);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
- .card요소에 :hover상태를 추가하여, 마우스를 올렸을 때 카드 크기가 커지고 그림자가 진해지는 효과를 구현한다.
- transition 속성을 사용하여 애니메이션 효과를 부드럽게 적용하고 있다.
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 터치스크린 인터페이스에서의 인터랙션 최적화 (0) | 2025.03.22 |
|---|---|
| 스크롤에 따른 반응형 인터랙션 만들기 (0) | 2025.03.21 |
| 사용자 클릭 시 애니메이션을 구현하는 방법 (0) | 2025.03.18 |
| Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 (0) | 2025.03.12 |
| 마이크로 인터랙션 (0) | 2025.03.09 |
댓글