纯css3灯泡开关特效代码

纯css3灯泡开关特效代码3716
纯CSS3和SVG鼠标滑过灯泡发光特效
相关css代码
.wrap .bulb {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.wrap #s-bulb {
  stroke: #262832;
  fill: #262832;
  stroke-width: 0;
  transition: 300ms;
}

.wrap #s-bulb {
  stroke: #262832;
  fill: #262832;
  transition: 1500ms;
}

.wrap:hover #s-bulb {
  fill: #c4d8d9;
  stroke: #c4d8d9;
  stroke-width: 2;
  transition: 100ms;
}

.wrap #www-filament {
  stroke-width: 0;
  stroke-width: 0;
  transition: 300ms;
}

.wrap #www-filament {
  fill: #333542;
  stroke: #333542;
  transition: 1500ms;
}

.wrap:hover #www-filament {
  stroke: #ffdf43; 
  stroke-width: 3;
  fill: #ffdf43;
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.wrap .light {
  width: 200px;
  height: 200px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.wrap .light .glow {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  opacity: 0;
  background: -webkit-radial-gradient(rgba(255,223,67,1), rgba(255,223,67,0) 70%);
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap:hover .light .glow {
  width: 200px;
  height: 200px;
  opacity: 0.2;
  background: -webkit-radial-gradient(rgba(255,223,67,1), rgba(255,223,67,0) 70%);
  transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap .light .flare {
  width: 0px;
  height: 0px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255,223,67,0);
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap:hover .light .flare {
  width: 50px;
  height: 50px;
  opacity: 0.5;
  background: rgba(255,223,67,1);
  transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

也许你还喜欢