纯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);}

也许你还喜欢