使用CSS和JavaScript实现下雨动画遇问题求助

你的代码里有几个关键问题导致只显示一个雨滴，逐一修正如下：

问题1：字符串模板语法错误 #

你在循环拼接字符串时用了{i}，但没使用模板字符串（反引号`），导致{i}被当作普通文本输出，所有雨滴的style属性都是无效的padding-right:{i}px，等于没设置位置偏移，所有雨滴重叠在一起。

问题2：用padding-right控制位置无效 #

雨滴是position: absolute定位，padding-right不会改变它的位置，应该用left或right属性来设置水平偏移量。

问题3：下落动画未定义 #

CSS里声明了animation: drop 0.7s linear infinite;，但没有定义@keyframes drop，雨滴不会有下落效果。

问题4：雨滴位置间隔太小（可选优化） #

如果直接用循环变量i设置位置，雨滴间距会非常小，看起来还是重叠，建议用随机值或者放大间隔。

修正后的完整代码 #

HTML（无需修改）

<main></main>
<script src="rain.js"></script>

CSS（补全动画关键帧）

.drop {
    position: absolute;
    bottom: 100%;
    width: 7px;
    height: 50px;
    pointer-events: none;
    background-color: blue;
    border-radius: 50%;
    animation: drop 0.7s linear infinite;
    z-index: 3;
}

/* 补全下落动画关键帧 */
@keyframes drop {
    to {
        transform: translateY(calc(100vh + 50px));
        opacity: 0;
    }
}

JavaScript（修复模板语法+用left定位）

const main = document.querySelector('main');

let htmlString = '';

// 循环生成10个雨滴，用随机left值避免重叠
for (let i = 0; i < 10; i++) {
    // 生成0到95vw的随机水平位置，避免雨滴超出屏幕
    const randomLeft = Math.random() * 95;
    htmlString += `<div class="drop" style="left: ${randomLeft}vw"></div>`;
}

main.innerHTML = htmlString;

内容的提问来源于stack exchange，提问作者Seungjun