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

2024년 11월 7일 (목) 23:14 판 (원본 보기) 아바투르너마저 (토론 | 기여) 편집 요약 없음 ← 이전 편집		2024년 11월 7일 (목) 23:17 판 (원본 보기) 아바투르너마저 (토론 | 기여) 편집 요약 없음 다음 편집 →
4번째 줄:		4번째 줄:
	height: 100vh;		height: 100vh;
	overflow: hidden;		overflow: hidden;
	background-color: #1e1e1e; /* 배경색을 어둡게 설정하여 비 효과가 더 돋보이도록 */
	}		}

---

2024년 11월 7일 (목) 23:17 판

.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; }