红绿灯交替效果-GOGO社区

纯代码，自己调class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>红蓝灯闪烁效果</title>
    <style>
    .traffic-light {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 100px;
    background-color: black;
    border-radius: 10px;
}

.red, .yellow, .green {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 10px;
}

.red {
    background-color: red;
}

.yellow {
    background-color: yellow;
}

.green {
    background-color: green;
}
</style>
</head>
<body>
    <div class="traffic-light">
        <div class="red"></div>
        <div class="yellow"></div>
        <div class="green"></div>
    </div>
    <script>const redLight = document.querySelector('.red');
const yellowLight = document.querySelector('.yellow');
const greenLight = document.querySelector('.green');

function blink(element) {
    element.style.opacity = element.style.opacity === '1' ? '0' : '1';
}

setInterval(() => {
    blink(redLight);
}, 500);

setInterval(() => {
    blink(yellowLight);
}, 800);

setInterval(() => {
    blink(greenLight);
}, 300);</script>
</body>
</html>