creating raining animation with CSS and JavaScript-CodePudding

I'm currently working on creating rainy animation.

Here's what i have tried. I created a rain drop view using CSS and tried to create multiple rain views using JavaScript modifying its position with padding-right. But on my webpage I can only see only one rain is dropping.

Can anyone help me to find out what did i wrong?

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 ></div>';

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

main.innerHTML = htmlString;

CodePudding user response：

Use a template string

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

CodePudding user response：

 htmlString  = '<div  style="padding-right:' i 'px"></div>';