Colorful Rain Animation Effects using Html CSS & Vanilla Javascript

 

# To create Colorful Rain Animation Effects using Html CSS & Vanilla Javascript Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create Colorful Rain Animation Effects using Html CSS & Vanilla Javascript Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the Colorful Rain Animation Effects:

<div></div>
            

2. Next, add some CSS to create a Colorful Rain Animation Effects and position the container in the center:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}
i {
    position: absolute;
    height: 200px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient(45deg, #ff004b, transparent);
    animation: animat 5s linear infinite;
}
i:nth-child(3n+1) {
    background: linear-gradient(45deg, #eb00ff, transparent);
}
i:nth-child(3n+2) {
    background: linear-gradient(45deg, #ff7b00, transparent);
}
i:nth-child(3n+3) {
    background: linear-gradient(45deg, #00ff62, transparent);
}
@keyframes animat {
    0% {
        transform: translateY(-200px);
    }
    100% {
        transform: translateY(calc(100vh + 200px));
    }
}
            

3. Use JavaScript to create a Colorful Rain Animation Effects element inside the container:

function rain() {
    let amount = 300;
    let body = document.querySelector('body');
    let i = 0;
    while (i < amount) {
        let drop = document.createElement('i');
        let size = Math.random() * 5;
        let posx = Math.floor(Math.random() * window.innerWidth);
        let delay = Math.random() * -20;
        let duration = Math.random() * 5;

        drop.style.width = 0.2 + size + "px";
        drop.style.left = posx + 'px';
        drop.style.animationDelay = delay+'s';
        drop.style.animationDuration = 1 + duration+'s';
        body.appendChild(drop);
        i++
    }
}
rain();
            

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create Colorful Rain Animation Effects html css |Colorful Rain Animation Effects in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.