<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>눈 내리는 효과</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #1e1e1e;
position: relative;
}
.snowflake {
position: absolute;
top: -10px;
color: white;
font-size: 1em;
pointer-events: none;
animation: fall linear forwards;
opacity: 0.8;
}
@keyframes fall {
0% {
transform: translateY(0);
}
80% {
transform: translateY(100vh);
}
100% {
transform: translateY(calc(100vh - 50px)); /* 아래쪽에 쌓이도록 */
}
}
.snow-pile {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px; /* 눈 쌓이는 높이 */
background: rgba(255, 255, 255, 0.7);
pointer-events: none;
}
</style>
</head>
<body>
<div class="snow-pile"></div>
<script>
const createSnowflake = () => {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.textContent = '❄'; // 눈송이 문자
snowflake.style.left = Math.random() * 100 + 'vw'; // 랜덤 위치
snowflake.style.fontSize = Math.random() * 1.5 + 0.5 + 'em'; // 랜덤 크기
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 랜덤 애니메이션 시간
document.body.appendChild(snowflake);
// 눈송이가 떨어진 후 제거
setTimeout(() => {
snowflake.remove();
}, 5000); // 5초 후 제거
};
setInterval(createSnowflake, 300); // 0.3초마다 눈송이 생성
</script>
</body>
</html>
눈송이 애니메이션: 눈송이가 떨어진 후 translateY(calc(100vh - 50px))를 사용하여 화면의 하단에 쌓이도록 설정했습니다.
눈 쌓이는 효과: snow-pile 클래스를 사용하여 화면 하단에 눈이 쌓이는 영역을 만들었습니다. 이 영역은 반투명한 흰색으로 설정되어 눈이 쌓인 것처럼 보입니다.
이 코드를 HTML 파일로 저장하고 웹 브라우저에서 열면 눈이 내리고 아래쪽에 쌓이는 효과를 확인할 수 있습니다.
'유용한정보 > 핫한정보' 카테고리의 다른 글
| 에드센스 카카오뱅크 해외송금받는방법 (1) | 2025.01.21 |
|---|---|
| 태권도 품세에 대해 알아보자 (1) | 2025.01.14 |
| 소리국악기연구원 악기장 임순국 (1) | 2025.01.09 |
| 피부 관리 노하우 베스트 10! (0) | 2024.12.28 |
| 설날 아이들과 가볼 만한 곳 베스트 10 (4) | 2024.12.27 |
