728x90
300x250
SMALL
사용자 클릭 시 애니메이션을 구현하는 방법
예를 들어, 버튼을 클릭하면 버튼이 부풀어오르는 애니메이션을 적용하거나, 클릭을 통해 다른 콘텐츠가 나타는 효과를 만들 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클릭 애니메이션</title>
<style>
.btn {
display: inline-block;
padding: 15px 30px;
background-color: #3498db;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
border-radius: 8px;
transition: transform 0.3s ease;
}
.btn:active {
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="btn">클릭하세요</button>
</body>
</html>
- 위 코드는 사용자가 버튼을 클릭했을때 transform:scale(1.1)효과로 버튼이 부풀어 오르는 애니메이션을 구현한다.
- transition: transfrom 0.3s ease로 애니메이션의 속도와 스타일을 설정하여 부드러운 효과를 만들 수 있다.
728x90
반응형
LIST
'Front-end > 애니메이션' 카테고리의 다른 글
| 터치스크린 인터페이스에서의 인터랙션 최적화 (0) | 2025.03.22 |
|---|---|
| 스크롤에 따른 반응형 인터랙션 만들기 (0) | 2025.03.21 |
| hover효과를 이용한 인터렉티브 UI 만들기 (0) | 2025.03.19 |
| Lottie(로띠) 활용법, JSON 애니메이션을 웹에 추가하는 법 (0) | 2025.03.12 |
| 마이크로 인터랙션 (0) | 2025.03.09 |
댓글