|
|
| (같은 사용자의 중간 판 24개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| .rain-container { | | .mw-body { |
| position: relative; | | background-size: cover; |
| width: 100vw; | | background-repeat: no-repeat; |
| height: 100vh; | | background-position: center; |
| overflow: hidden;
| | background-attachment: fixed; |
| background-color: #1e1e1e; /* 배경색을 어둡게 설정하여 비 효과가 더 돋보이도록 */ | |
| } | | } |
|
| |
| .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; }
| |