制作交通信号灯

本文介绍了一种使用HTML和CSS创建交通信号灯的方法。通过设置背景渐变、边框、阴影等样式,实现了红绿黄三色灯的效果,并将其布局在一个模拟的道路背景中。文章详细展示了如何利用CSS的渐变、圆角、阴影等特性来实现信号灯的真实感。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作交通信号灯</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			body{background: #FFFFFF;background: url(img/road.jpg) no-repeat;background-size:800px ;}
			.box{width: 200px;height: 60px;border: 5px solid #434343;margin: 30px 0 0 300px;border-radius:50px ;background: -webkit-linear-gradient(top,#000,#424242);box-shadow: 0 -5px 10px #333;}
			.box div{width: 50px;height: 50px;border-radius:50px ;border: 2px solid #333333;float: left;margin-left: 10px;margin-top: 5px;}
			.red{background: -webkit-radial-gradient(#f00,#600);}
			.yellow{background: -webkit-radial-gradient(#ff0,#660);}
			.green{background: -webkit-radial-gradient(#0f0,#060);}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="red">
				
			</div>
			<div class="yellow">
				
			</div>
			<div class="green">
				
			</div>
		</div>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值