틀:연습장:아바투르너마저/1/styles.css

.rain-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.rain-drop {
  position: absolute;
  top: -10%; /* 화면 상단에서 시작 */
  width: 2px;
  height: 15px;
  background-color: rgba(173, 216, 230, 0.8); /* 연한 파란색 */
  border-radius: 50%;
  animation: fall 1s linear infinite;
  opacity: 0.7;
}

/* 빗방울 떨어지는 애니메이션 */
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) translateX(10px); /* 살짝 흔들리며 떨어짐 */
    opacity: 0;
  }
}

/* 여러 빗방울의 애니메이션 타이밍과 위치를 다르게 설정 */
.rain-drop:nth-child(1) { left: 10%; animation-delay: 0s; }
.rain-drop:nth-child(2) { left: 30%; animation-delay: 0.2s; }
.rain-drop:nth-child(3) { left: 50%; animation-delay: 0.4s; }
.rain-drop:nth-child(4) { left: 70%; animation-delay: 0.6s; }
.rain-drop:nth-child(5) { left: 90%; animation-delay: 0.8s; }