网站简介

在数字时代的浪潮中，掌握关键技能是通往成功的必经之路。我们的网站致力于为您提供一站式解决方案：从网站建设、开发到定制，我们用专业的技术打造您的理想在线空间；生活技巧、手机刷机和电脑装机教程助您轻松应对日常技术挑战；软件开发课程让您紧跟科技前沿；教育教学资源丰富您的知识库；安全提醒保护您的网络生活；音乐与视频娱乐让您放松心情；商店信息一手掌握，购物更便捷；知识拓展开阔视野；美食分享满足味蕾；随手记功能记录生活点滴；文化宣传传承经典；影视音乐赏析提升审美；疑难解答解决您的困惑。加入我们，开启智慧生活的新篇章！

热门文章TOP8

526人已阅读

热门 GOGO社区网站搭建(自助服务)

TOP1

工单系统开发中

2月17日 15:37430人已阅读

TOP2

广告商入驻流程

12月10日 10:41383人已阅读

TOP3

咪咪网站运营：趣味性悄悄飘起的成功风头

7月18日 07:02307人已阅读

TOP4

新客认证优惠特惠

10月13日 15:40293人已阅读

TOP5

图片交替

9月27日 06:46210人已阅读

TOP6

音乐，一起嗨

7月13日 20:15201人已阅读

TOP7

全球环境保护的现状与挑战研究报告

2月9日 06:12191人已阅读

TOP8

网站最新注册用户NEW8

🎀 🌸

红绿灯交替效果

📝 Dream 🏷️ 教育教学

📖 本文共计13 字 📖 阅读时长1 分钟

红绿灯交替效果

Dream

520

9月27日 20:46发布

0350

文章最后更新时间：2024-09-27 20:46:54

纯代码，自己调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>