butterfly effect

<style>

.butterfly {

position: fixed;

width: 60px;

height: auto;

z-index: 9999;

pointer-events: none;

animation: fall linear infinite;

}

@keyframes fall {

0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }

100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }

}

</style>

<script>

document.addEventListener("DOMContentLoaded", function() {

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

let img = document.createElement("img");

img.src = "http://fibellanova.local/wp-content/uploads/2025/07/66-butterfly-png-image-thumb.png"; 

img.className = "butterfly";

img.style.left = Math.random() * 100 + "vw";

img.style.animationDuration = (5 + Math.random() * 5) + "s";

img.style.animationDelay = (Math.random() * 5) + "s";

document.body.appendChild(img);

}

});

</script>