实现红绿灯的效果

时间:2021-2-20 作者:admin

首先看一下效果如下:
实现红绿灯的效果
实现红绿灯的效果
实现红绿灯的效果
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>

实现红绿灯的效果

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。