static

Mouse up

code

<div class="bulb"></div>
Copy the code
.bulb {
    width:  300px;
    height:  300px;
    background: #fff;
    border-radius: 50% 50% 25% 50%;
    transform: rotate(-135deg);
    box-shadow: inset 20px 20px 200px orange, 5px 0px 10px orange, -5px 0px 10px orange, 0px 5px 10px orange;
}
.bulb::after {
    content:  ' ';
    display: inline-block;
    width:  300px;
    height:  300px;
    border-radius: 50% 50% 25% 50%;
    box-shadow: inset 20px 20px 200px orange, 5px 0px 1000px orange, -5px 0px 1000px orange, 0px 5px 1000px orange;
    opacity: 0;
    transition: opacity 1s;
}
.bulb:hover::after {
    opacity: 1;
}
Copy the code

explain

The shape of the bulb

Here, border-radius is used for simulation. The right Angle in three directions becomes round, and the right Angle in the last direction becomes an ellipse. Then rotate that direction of the ellipse to the top.

Of course, for a more realistic effect, SVG or Clip-path is recommended.

Effect of light

Box-shadow can declare multiple values at the same time. The first value uses inset to cast the shadow inside the element, and the next three values cast the shadow outside, mimicking the halo effect. When mouse moves up, increase blur value to simulate glow effect.

Why transition opacity instead of box-shadow

Transition opacity is better than transition box-shadow. Box-shadow causes redrawing, while opacity only affects composition.

The online demo

Jsbin.com/wawogiw/edi…