笑脸

最新推荐文章于 2023-01-04 20:58:03 发布

忘。。。忘了要干嘛了

最新推荐文章于 2023-01-04 20:58:03 发布

阅读量160

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44549449/article/details/87603901

本文详细介绍了使用纯CSS实现一个动态圆形交通灯的设计方案。通过定位、阴影和过渡效果，展示了如何创建逼真的红绿黄三色灯切换效果。

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
    <style>
		.on{
			width:200px;
			height: 200px;
			background: #F8FF00;
			border-radius: 150px;
			margin: 0 auto;
			position: relative;
			line-height: 100px;
			top: 130px;
			left: 0px;
			box-shadow: 0px 0px 0px 0px #000;
		}
		.lo{
			width: 50px;
			height:50px;
			background: #F8FF00;
			position: relative;
			float: left;
			top: 60px;
			left: 15px;
			border-radius: 150px;
			box-shadow:-1px -7px 7px -2px #000;
		}
		.li{
			width: 50px;
			height:50px;
			background: #F8FF00;
			position: relative;
			float: right;
			top: 60px;
			left: -15px;
			border-radius: 150px;
			box-shadow: -1px -7px 7px -2px #000;
		}
		.ll{
			width: 50px;
			height:50px;
			background: #F8FF00;
			position: relative;
			float:inherit;
			margin: 0 auto;
			top: 129px;
    		left: 0px;
    		border-radius: 150px;
    		box-shadow: 0px 7px 0px -2px #000;
		}
	</style>
<body>
 <div>
 	<div class="on">
 		<div class="lo"></div>
 		<div class="li"></div>
 		<div class="ll"></div>
 	</div>
 </div>
</body>
</html>


```![在这里插入图片描述](https://img-blog.csdnimg.cn/20190218103855203.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0OTQ0OQ==,size_16,color_FFFFFF,t_70)