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

}