.rain-container {
            position: fixed;    /* 改为固定定位 */
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;        /* 置于底层 */
            pointer-events: none; /* 穿透点击事件 */
        }

        .raindrop {
            position: absolute;
            width: 2px;
            height: 15px;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
            animation: fall linear infinite;
            transform: rotateZ(5deg);
            will-change: transform, opacity; /* 启用GPU加速 */
        }

        .ripple {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            animation: ripple 0.6s ease-out;
        }

        @keyframes fall {
            0% {
                transform: translateY(-20px) rotateZ(15deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotateZ(15deg);
                opacity: 0.3;
            }
        }

        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: 0.5;
            }
            100% {
                transform: scale(5);
                opacity: 0;
            }
        }