[分享]css3指示灯效果

CSS3指示灯效果是Web开发中常见的元素，可以为用户提供清晰明了的指示信号。

/* 定义指示灯容器的样式 */
.light-container {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 10px;
  position: relative;
}

/* 定义指示灯内部的样式 */
.light-inner {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

/* 定义指示灯亮起来的样式 */
.light-inner.on {
  background-color: green;
  transform: translateX(16px);
}

/* 定义指示灯熄灭的样式 */
.light-inner.off {
  background-color: red;
}

/* HTML代码如下 */
<div class="light-container">
  <div class="light-inner"></div>
</div> 

通过CSS3的过渡动画和伸缩变换，我们可以轻松地实现指示灯的“亮”和“灭”效果。总体来说，CSS3是Web开发中非常重要的技术，可以为我们打造出更加精美，丰富多彩的网页界面。