오늘은 HTML/CSS 자바스크립트를 활용하여 마우스 클릭 이벤트를 만들어보겠습니다.
@keyframes
@keyframes 을 사용하면 웹 페이지에 동적인 시각 효과를 추가할 수 있습니다. 이를 통해 사용자의 주의를 끌거나, 인터페이스의 상호작용성을 향상시킬 수 있습니다. 예를 들어, 버튼에 마우스를 올렸을 때 부드럽게 색상이 변하는 효과나, 페이지 로딩 시 요소가 점진적으로 나타나는 효과 등을 구현할 수 있습니다.
기본사용법
@keyframes animation-name {
from {
/* 시작 상태 스타일 */
}
to {
/* 끝 상태 스타일 */
}
}
퍼센트 사용법
@keyframes animation-name {
0% {
/* 시작 상태 스타일 */
}
50% {
/* 중간 상태 스타일 */
}
100% {
/* 끝 상태 스타일 */
}
}
코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클릭 이펙트 예제</title>
<style>
/* 클릭 이펙트 스타일 */
.click-effect {
position: absolute;
width: 100px;
height: 100px;
background-color: rgba(0, 0, 255, 0.5);
border-radius: 50%;
pointer-events: none;
transform: scale(0);
animation: click-animation 0.5s forwards;
}
/* 클릭 이펙트 애니메이션 */
@keyframes click-animation {
to {
transform: scale(1);
opacity: 0;
}
}
</style>
</head>
<body>
<script>
// 문서 전체에 클릭 이벤트 리스너를 추가합니다.
document.addEventListener('click', function(e) {
// 클릭 이펙트를 만듭니다.
var effect = document.createElement('div');
effect.className = 'click-effect';
effect.style.left = e.clientX - 50 + 'px'; // 이펙트 중앙이 마우스 위치에 오도록 조정
effect.style.top = e.clientY - 50 + 'px';
document.body.appendChild(effect);
// 애니메이션이 끝난 후 이펙트를 제거합니다.
setTimeout(function() {
effect.remove();
}, 500); // 애니메이션 지속 시간과 일치해야 합니다.
});
</script>
</body>
</html>
결과입니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Tailwind로 비밀번호 일치 여부 확인하기 (0) | 2024.04.24 |
|---|---|
| [HTML/CSS] Tailwind로 유효성 검사 기능이 들어한 회원가입 만들기 (0) | 2024.04.15 |
| [HTML/CSS] Bootstrap의 Toast 기능 사용하기 (0) | 2024.04.08 |
| [HTML/CSS] 레이아웃 만들기 (0) | 2024.03.16 |
| [HTML/CSS] Bootstrap으로 아코디언 만들기 (0) | 2024.03.12 |
