使用 CSS 和 JavaScript 创建下雨动画

Question

我目前正在制作下雨动画。

这是我尝试过的。 我使用CSS 创建了一个雨滴视图，并尝试使用JavaScript 创建多个雨视图，并使用padding-right 修改其位置。但是在我的网页上，我只能看到只下一场雨。

谁能帮我找出我做错了什么？

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

JavaScript：

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

let htmlString = '<div class="drop"></div>';

for (let i = 0; i < 10; i++) {
    htmlString += '<div class="drop" style="padding-right:{i}px></div>';
}

main.innerHTML = htmlString;

Answer 1

使用模板字符串

htmlString += `<div class="drop" style="padding-right:${i}px></div>`