静止
鼠标移上去
代码
<div class="bulb"></div>
.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;
}
解释
灯泡的外形
这里用 border-radius 进行模拟，三个方向直角变成圆形，最后一个方向的的直角变成椭圆。然后将椭圆的那一个方向旋转到上方。
当然，如果想要更逼真的效果的话，推荐使用 svg 或者 clip-path 来画。
灯亮的效果
box-shadow 可以同时声明多个值，第一个值使用 inset 将阴影投射到元素内部，后面三个值将阴影投射到外部，模拟灯晕效果。鼠标移上去时，通过增大 blur 值，来模拟发光效果。
为什么 transition opacity，而不 transition box-shadow
transition opacity 比 transition box-shadow 性能要好。box-shadow 会引起重绘，而 opacity 只影响合成。
