css3 一束光闪过 |css菜单栏怎么漂浮在图片上

.light {
position: relative;
display: inline-block;
}
.light:hover:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 30px 30px #fff, 0 0 40px 40px #ff9, 0 0 50px 50px orange;
opacity: 0;
animation: light 1s linear infinite;
}
@keyframes light {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

以上是一段CSS3代码示例，实现了一束光闪过的特效。关键在于使用了伪元素:after和CSS动画。

当鼠标悬停在含有.light类的元素上时，会出现一个圆形的光晕，由内向外缩小最终消失。这是通过设置伪元素的box-shadow属性实现的。box-shadow的设置包含三个参数，分别代表向X轴方向平移、向Y轴方向平移和阴影模糊程度。这三个参数相互叠加，形成了一种在视觉上产生放射纹的效果。

在这段代码中，伪元素的大小、位置、边框圆角都被设置为100%，使其完全覆盖了原有元素。然后，该元素被设置为可动画的，即定义了一个名为light的动画，执行时间为1秒，线性缓动，无限循环。

在动画中，伪元素的不透明度从1逐渐降低到0。当不透明度为0时，光晕消失。