首页生成代码，实现灰尘飘飞的动画效果

生成代码，实现灰尘飘飞的动画效果

时间: 2024-04-22 22:24:31 浏览: 43

你好！以下是一段实现灰尘飘飞动画效果的代码示例： ```html <!DOCTYPE html> <html> <head> <title>灰尘飘飞动画效果</title> <style> body { margin: 0; overflow: hidden; background-color: black; } .dust { position: absolute; background-color: gray; opacity: 0.5; pointer-events: none; } </style> </head> <body> <script> // 创建灰尘 function createDust() { const dust = document.createElement('div'); dust.className = 'dust'; const size = Math.random() * 10 + 2; dust.style.width = size + 'px'; dust.style.height = size + 'px'; dust.style.left = Math.random() * window.innerWidth + 'px'; dust.style.top = Math.random() * window.innerHeight + 'px'; return dust; } // 添加灰尘到页面 function addDust() { const dust = createDust(); document.body.appendChild(dust); // 设置灰尘的动画效果 const duration = Math.random() * 10 + 5; const angle = Math.random() * 360; const distance = Math.random() * 200 + 100; dust.style.animation = `float ${duration}s linear infinite`; dust.style.transform = `rotate(${angle}deg) translate(${distance}px, 0)`; // 移除灰尘 setTimeout(() => { dust.remove(); }, duration * 1000) } // 初始化 function init() { const numDust = Math.floor(window.innerWidth / 20); for (let i = 0; i < numDust; i++) { addDust(); } } // 页面加载完成后调用初始化函数 window.addEventListener('load', init); </script> </body> </html> ``` 这段代码在网页上创建了许多随机大小和位置的灰色方块，它们会以不同的速度和角度飘飞在页面上，营造出灰尘飘飞的动画效果。希望对你有帮助！如有其他问题，请随时提问。

阅读全文