This whimsical animation combines twinkling stars, glowing lights, and colorful petals to create a dreamy and enchanting visual that soothes the senses and sparks imagination.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Blossoming Flowers at Magical Night</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow: hidden;
height: 100vh;
font-family: 'Arial', sans-serif;
}
.flower {
position: absolute;
width: 20px;
height: 20px;
animation: float 12s infinite ease-in-out;
transform: scale(0.5);
}
.petal {
position: absolute;
width: 10px;
height: 20px;
background: pink;
border-radius: 50% 50% 0 0;
transform-origin: bottom center;
}
@keyframes float {
0% {
transform: translateY(100vh) scale(0.5);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateY(-10vh) scale(1);
opacity: 0;
}
}
.twinkle {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkle 2s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.glow {
position: absolute;
background: rgba(255, 182, 193, 0.2);
border-radius: 50%;
filter: blur(15px);
}
</style>
</head>
<body>
<script>
const flowerCount = 30;
const starCount = 100;
for (let i = 0; i < flowerCount; i++) {
const flower = document.createElement('div');
flower.classList.add('flower');
flower.style.left = `${Math.random() * 100}%`;
flower.style.animationDuration = `${8 + Math.random() * 5}s`;
const petalCount = 6 + Math.floor(Math.random() * 4);
for (let j = 0; j < petalCount; j++) {
const petal = document.createElement('div');
petal.classList.add('petal');
petal.style.transform = `rotate(${(360 / petalCount) * j}deg) translateY(-10px)`;
petal.style.background = `hsl(${Math.random() * 360}, 70%, 70%)`;
flower.appendChild(petal);
}
document.body.appendChild(flower);
}
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('twinkle');
star.style.top = `${Math.random() * 100}vh`;
star.style.left = `${Math.random() * 100}vw`;
star.style.animationDelay = `${Math.random() * 2}s`;
document.body.appendChild(star);
}
// Glows
for (let i = 0; i < 10; i++) {
const glow = document.createElement('div');
glow.classList.add('glow');
glow.style.width = `${50 + Math.random() * 80}px`;
glow.style.height = glow.style.width;
glow.style.left = `${Math.random() * 100}%`;
glow.style.top = `${Math.random() * 100}%`;
document.body.appendChild(glow);
}
</script>
</body>
</html>
Comments
Post a Comment