代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>警灯效果红蓝闪烁</title><style>/* 调整元素的明暗 *//* filter: brightness(100%); */.context{margin-left: 150px;}.red{float: left;width: 50px;height: 100px;background-color: red;border: 50px solid red;border-top-left-radius: 50px;border-top-right-radius: 50px;opacity: 0.5;}.blue{float: left;width: 50px;height: 100px;background-color: blue;border: 50px solid blue;border-top-left-radius: 50px;border-top-right-radius: 50px;opacity: 0.5;}</style>
</head>
<body><div class="context"><div class="red"></div><div class="blue"></div></div><script>let redlamp = document.getElementsByClassName('red')[0]let bluelamp = document.getElementsByClassName('blue')[0]let i=0setInterval(o=>{if(i%2==0){redlamp.style.opacity='1'bluelamp.style.opacity='0.5'i++}else{redlamp.style.opacity='0.5'bluelamp.style.opacity='1'i++}},300)</script>
</body>
</html>
效果图: