实现红绿灯的效果

首先看一下效果如下：



html部分：

<div class="box">
		<div class="around red" color="red"></div>
		<div class="around" color="yellow"></div>
		<div class="around" color="green"></div>
	</div>

CSS部分：
1） 首先我们给body标签设置一个背景颜色；
2） 给div标签上面带有box的类设置高宽以及背景颜色；
3） 在带有box类的div里面添加三个div，再给每个div添加上around的类和颜色的类以及背景颜色/宽/高/定位；

4） 添加高光以及颜色和阴影。

<style>
		body{
			background:#1abc9c;
		}
		.box{
			height: 165px;
			width: 70px;
			margin: 300px auto;
			background-color: #2c3e50;
			border-radius: 50px;
			padding: 15px 0px;
		}
		.around{
			width: 40px;
			height: 40px;
			background:rgba(0,0,0,0.3);
			border-radius: 50%;
			margin: 10px 0px 0px 14px;
			position: relative;
		}
		.around::after {
			border-right: 4px solid rgba(255, 255, 255, 0.6);
			border-radius: 100%;
			content: ' ';
			position: absolute;
			top: 5px;
			left: 0px;
			width: 30px;
			height: 30px;
		}
		.red{
			background-color: rgba(206,25,28,1.00);
			box-shadow: 0px 0px 20px 5px rgba(206,25,28,1.00);
		}
		.yellow{
			background-color: rgba(218,201,10,1.00);
			box-shadow: 0px 0px 20px 5px rgba(218,201,10,1.00);	
		}
		.green{
			background-color: rgba(0,197,56,1.00);
			box-shadow: 0px 0px 20px 5px  rgba(0,197,56,1.00);
		}
	</style>

JavaSript部分如下：

<script>
		const arounds=document.querySelector('.around')
		//querySelector类选择器 const保留字
		let index=0;
		setInterval(()=>{
			changeLight();
		},1000);
		//setInterval（）计时器 changeLight()1000毫秒改变一次
		function changeLight(){
			arounds[index].className='around';
		//around赋值于arounds[index]
			index++;
			
			if(index>2){
				index=0;
			}
			//如果index小于2，index=0
			const i=arounds[index]
			i.classList.add(i.getAttribute('color'));
		}
	</script>