Front-end/애니메이션
hover효과를 이용한 인터렉티브 UI 만들기
mooyou
2025. 3. 19. 18:40
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