[分享]css3控制灯泡开关的源码

CSS3是一种强大的样式语言，用于控制网页元素的外观和布局。在这篇文章中，我们将介绍如何使用CSS3控制灯泡开关的源码。/ 定义灯泡的样式 / .lightbulb { width: 40px; he...

CSS3是一种强大的样式语言，用于控制网页元素的外观和布局。在这篇文章中，我们将介绍如何使用CSS3控制灯泡开关的源码。

/* 定义灯泡的样式 */
.lightbulb {
  width: 40px;
  height: 50px;
  border-radius: 50% 50% 0 0;
  background: #fafafa;
  position: relative;
  box-shadow: inset 0 1px 0 #e0e0e0, 0 2px 0 #c2c2c2, 0 3px 0 #b6b6b6;
}

/* 定义灯泡的“线” */
.lightbulb::before {
  content: "";
  display: block;
  width: 6px;
  height: 20px;
  background: #d0d0d0;
  border-radius: 50%;
  position: absolute;
  top: -18px;
  left: 50%;
  margin-left: -3px;
  box-shadow: 0 1px 0 #fff, 0 2px 0 #e0e0e0, 0 3px 0 #c2c2c2;
}

/* 定义灯泡的“颈部” */
.lightbulb::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #fafafa;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: absolute;
  top: -28px;
  left: 50%;
  margin-left: -5px;
  box-shadow: 0 1px 0 #e0e0e0, 0 2px 0 #c2c2c2, 0 3px 0 #b6b6b6;
}

/* 定义灯泡的光芒 */
.lightbulb .light {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -12px;
  box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.5);
}

/* 定义灯泡的开和关状态 */
.lightbulb.on .light {
  display: block;
}

.lightbulb.off .light {
  display: none;
}

/* 定义灯泡的开和关动画 */
.lightbulb.on .light {
  animation: bulbOn 1s linear;
}

.lightbulb.off .light {
  animation: bulbOff 1s linear;
}

/* 开灯动画 */
@keyframes bulbOn {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }
}

/* 关灯动画 */
@keyframes bulbOff {
  0% {
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.5);
  }
} 

以上代码使用了CSS3的众多功能，包括border-radius、box-shadow、opacity、transform、animation等，展现了灯泡开启和关闭的动画效果。使用这个源码可以为您的网页增添一点趣味和互动性。