06_Effect

🍀Style_01

🍀Style_02

##소스코드

<!DOCTYPE html>

<head>

<title>Rain Animation with Splashes</title>

<style>

body, html {

margin: 0;

padding: 0;

height: 100%;

background: #0c0c0c;

overflow: hidden;

}

.rain {

position: absolute;

bottom: 100%;

width: 0.6px;

height: 10px;

background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);

animation: rainDrop 0.7s linear infinite;

}

.splash {

position: absolute;

bottom: 0;

width: 7px;

height: 2px;

border-radius: 50%;

background: white;

animation: splashEffect 0.5s linear infinite;

}

@keyframes rainDrop {

0% {

top: -100px;

}

100% {

top: 100%;

}

@keyframes splashEffect {

0% {

width: 7px;

height: 2px;

opacity: 30;

}

100% {

width: 10px;

height: 0;

opacity: 0;

}

</style>

</head>

<body>

for (let i = 0; i < 50; i++) {

let drop = document.createElement('div');

drop.className = 'rain';

drop.style.left = Math.random() * window.innerWidth + 'px';

drop.style.animationDelay = Math.random() * 2 + 's';

drop.style.animationDuration = Math.random() * 1 + 0.3 + 's';

document.body.appendChild(drop);

let splash = document.createElement('div');

splash.className = 'splash';

splash.style.left = Math.random() * window.innerWidth + 'px';

splash.style.animationDelay = Math.random() * 2 + 's';

document.body.appendChild(splash);

}

</script>

</body>

</html>