首页10秒延迟切换红绿灯的——交通信号灯html简单动画代码

10秒延迟切换红绿灯的——交通信号灯html简单动画代码

时间: 2024-11-23 13:30:30 浏览: 25

为了创建一个简单的HTML和CSS交通信号灯动画，我们可以利用JavaScript来控制定时器和改变颜色。下面是一个基础的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>交通信号灯动画</title> <style> .traffic-light { width: 50px; height: 50px; border-radius: 50%; position: relative; display: inline-block; margin-bottom: 10px; } .traffic-light::before, .traffic-light::after { content: ''; width: 40px; height: 40px; background-color: red; border-radius: 50%; position: absolute; top: calc(50% - 20px); } .green { left: 0; background-color: green; } .red { right: 0; } </style> </head> <body> <div id="trafficLight" class="traffic-light"></div> <script> // 设置初始状态为红色 var light = document.getElementById('trafficLight'); light.classList.add('red'); // 每隔10秒切换一次 setInterval(function() { if (light.classList.contains('red')) { light.classList.remove('red'); light.classList.add('green'); } else { light.classList.remove('green'); light.classList.add('red'); } }, 10000); // 10000毫秒即10秒 </script> </body> </html> ``` 这个例子中，我们创建了一个圆形的交通信号灯，起初是红色。通过`setInterval`函数，每10秒会将灯的颜色从红色切换到绿色，然后再回到红色，实现了简单的10秒延迟切换效果。

阅读全文