❄️ 티스토리(Tistory) 배경에 눈 내리는 효과 추가하기(Html, CSS)

안녕하세요, 여러분! 오늘은 여러분의 블로그를 더욱 특별하고 아름답게 만들어줄 마법 같은 코드를 소개해 드리려고 합니다. 바로 블로그에 눈이 내리는 효과를 추가하는 코드인데요, 이 코드를 사용하면 마치 겨울 동화 속에 있는 듯한 분위기를 연출할 수 있습니다. ☃️

 

1. HTML 수정(티스토리 Html 편집)

<div class="snow-container">
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  <div class="snowflake"></div>
  </div>

• snowflake 요소를 원하는 개수만큼 추가

 

2. CSS 수정(티스토리 CSS 편집)

.snow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  animation: snowfall 5s linear infinite;
}

.snowflake:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}

.snowflake:nth-child(2) {
  left: 30%;
  animation-delay: 1s;
}

.snowflake:nth-child(3) {
  left: 50%;
  animation-delay: 2s;
}

.snowflake:nth-child(4) { /* 추가된 눈송이 스타일 */
  left: 70%;
  animation-delay: 3s;
}

.snowflake:nth-child(5) { /* 추가된 눈송이 스타일 */
  left: 20%;
  animation-delay: 4s;
}

.snowflake:nth-child(6) { /* 추가된 눈송이 스타일 */
  left: 60%;
  animation-delay: 5s;
}

/* 더 많은 눈송이 요소에 대한 스타일 추가 */

@keyframes snowfall {
  0% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(100vh);
  }
}

 

• 추가된 각 snowflake 요소에 대해 nth-child() 선택자를 사용하여 left 속성과 animation-delay 속성을 설정
• left 속성은 눈송이의 가로 위치를 설정하고, animation-delay 속성은 애니메이션 시작 시간을 지연시켜 눈송이가 랜덤하게 떨어지는 효과