css 灯光绕场旋转

在CSS中，要实现灯光绕场旋转效果，可以使用CSS的动画和变换属性。首先，我们需要创建一个圆形的灯光元素，并设置适当的样式，如颜色、尺寸等。然后，通过CSS的动画属性，我们可以定义一个关键帧动画，来控制灯光的旋转效果。

具体步骤如下：
1. 创建一个div元素，作为灯光的容器，并设置合适的尺寸和位置。
2. 通过CSS设置容器的背景色和形状，使其呈现出圆形灯光的效果。
3. 使用CSS的动画属性，如@keyframes，定义一个灯光旋转的动画。
4. 在关键帧动画中，设置不同的旋转角度和持续时间，从而实现灯光在容器中绕场旋转的效果。
5. 将动画应用到灯光容器上，使用animation属性，并设置持续时间、重复次数等参数。

示例代码如下：

<style>
.light {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>

<div class="light"></div>

以上代码将创建一个黄色的圆形灯光，并使其在容器中以线性方式绕场旋转，持续时间为5秒，无限循环。你可以根据需求修改尺寸、颜色、动画参数等，以实现所需的灯光绕场旋转效果。