mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-05 14:00:31 +02:00
57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
const cloudContainer = document.createElement("div");
|
|
cloudContainer.style.position = "fixed";
|
|
cloudContainer.style.top = "0";
|
|
cloudContainer.style.left = "0";
|
|
cloudContainer.style.width = "100vw";
|
|
cloudContainer.style.height = "150px";
|
|
cloudContainer.style.pointerEvents = "none";
|
|
cloudContainer.style.zIndex = "9999";
|
|
cloudContainer.style.background = "transparent";
|
|
cloudContainer.style.backdropFilter = "none";
|
|
cloudContainer.id = "deco";
|
|
document.body.appendChild(cloudContainer);
|
|
|
|
const maxClouds = 20;
|
|
const clouds = [];
|
|
|
|
const createCloud = () => {
|
|
if (clouds.length >= maxClouds) return;
|
|
|
|
const cloud = document.createElement("div");
|
|
cloud.style.position = "absolute";
|
|
const size = Math.random() * 80 + 100;
|
|
cloud.style.width = `${size}px`;
|
|
cloud.style.height = `${size * 0.6}px`;
|
|
cloud.style.background = "rgba(255, 255, 255, 0.3)";
|
|
cloud.style.borderRadius = `${Math.random() * 51}%`;
|
|
cloud.style.filter = "blur(10px)";
|
|
cloud.style.backdropFilter = "blur(10px)";
|
|
|
|
cloud.x = -size;
|
|
cloud.y = Math.random() * 50;
|
|
cloud.speed = Math.random() * 0.3 + 0.1;
|
|
|
|
cloud.style.left = `${cloud.x}px`;
|
|
cloud.style.top = `${cloud.y}px`;
|
|
|
|
clouds.push(cloud);
|
|
cloudContainer.appendChild(cloud);
|
|
};
|
|
|
|
setInterval(createCloud, 1000);
|
|
|
|
function updateClouds() {
|
|
clouds.forEach((cloud, index) => {
|
|
cloud.x += cloud.speed;
|
|
cloud.style.left = `${cloud.x}px`;
|
|
|
|
if (cloud.x > window.innerWidth) {
|
|
cloudContainer.removeChild(cloud);
|
|
clouds.splice(index, 1);
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(updateClouds);
|
|
}
|
|
|
|
updateClouds();
|