首页实现聚拢流水灯效果代码

实现聚拢流水灯效果代码

时间: 2024-12-23 17:19:40 浏览: 3

实现一个聚拢流水灯效果通常涉及到动画和JavaScript编程，尤其是当我们在网页上创建这种交互效果时。以下是一个简单的HTML、CSS和JavaScript示例，展示了如何在一个数组中存储灯泡元素，并逐个改变它们的位置来模拟流水灯效果： ```html <!DOCTYPE html> <html lang="en"> <head> <style> #lights { position: relative; width: 400px; height: 40px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); } .light { position: absolute; width: 5px; height: 100%; background-color: red; transition: left 0.5s ease-in-out; } </style> </head> <body> <div id="lights"></div> <script> const lights = document.getElementById('lights'); const numLights = 10; // 聚拢的灯泡数量 let lightWidth = 50; // 初始宽度 for (let i = 0; i < numLights; i++) { const light = document.createElement('div'); light.classList.add('light'); light.style.left = `${i * lightWidth}px`; lights.appendChild(light); // 动画效果，让灯泡从两端向中心聚拢 setInterval(() => { if (lightLeft <= lightWidth / 2) { // 当灯光到达中间位置时停止 clearInterval(); } else { light.style.left = `${lightLeft -= 5}px`; // 每次减少5px直到聚拢 } }, 50); // 每隔50毫秒移动一次 } </script> </body> </html> ``` 在这个例子中，我们首先创建了一个动态生成的灯泡元素数组，然后通过`setInterval`函数逐渐将每个灯泡向左移动，形成聚拢的效果。当灯泡达到中间位置时，我们就停止了动画。

阅读全文