css html实现灯泡开关

在CSS和HTML中实现灯泡开关的效果通常通过创建一个按钮和一些伪元素来模拟开关操作。下面是一个简单的例子：

HTML部分:

<div class="switch">
  <button class="slider">开</button>
  <span class="bulb"></span>
</div>

CSS部分:

.switch {
  position: relative;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 30px;
  height: 17px;
  background-color: #ccc;
  border-radius: 18px;
  transition: .4s;
}

.slider:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -15px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 18px solid #ccc;
  transition: .4s;
}

.bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.5;
}

.slider.opened {
  background-color: #ff6347; /* 颜色变化表示开关状态 */
}

.slider.opened:before {
  border-right-color: #ff6347;
  transform: rotate(90deg);
}

这个例子中，当`.slider`被点击时，它的背景颜色、形状以及`.bulb`的透明度会发生改变，从而模拟灯泡开关的效果。你可以通过JavaScript添加交互逻辑，例如监听按钮的click事件并切换对应的样式。