css 发光转动 |css样式 不影响子

.box {
width: 100px;
height: 100px;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
width: 150px;
height: 150px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
animation: box-shadow-glow 1.5s ease-in-out infinite;
}
@keyframes box-shadow-glow {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
}
50% {
box-shadow: 0 0 0 50px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
}
}

首先，大家需要定义一个元素，它将是大家将显示光圈旋转效果的容器。然后，大家使用伪元素(::before)创建一个圆形元素，并使用box-shadow属性来设置它的光圈效果。

接下来，大家定义一个动画效果(box-shadow-glow)，并分别在0%、50%和100%的时候，设置元素的box-shadow属性，完成光圈的渐变效果。

最后，大家将所创建的动画效果应用于伪元素，使用infinite属性来让动画效果循环播放，实现光圈的旋转效果。

通过这种方法，大家可以轻松地使用CSS读取光圈旋转效果，让大家的网页更加动态和生动。