纯css3灯泡开关特效代码

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

在线演示        积分下载        6毛下载        砍两刀下载