css 让一个小球围绕一个点永久旋转

在CSS中，要创建一个小球围绕一个点无限旋转的效果，通常需要结合`@keyframes`动画和`transform`属性。下面是一个简单的示例：

/* 定义关键帧动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* 容器样式，包含小球 */
.container {
  position: relative;
  width: 100px; /* 设置容器大小 */
  height: 100px;
}

/* 小球样式 */
.ball {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  background-color: red;
  border-radius: 50%; /* 使球体看起来像圆形 */
  width: 50px;
  height: 50px;
  animation: rotate infinite; /* 应用旋转动画并让它持续不断 */
}

/* 如果想要让小球围绕特定点旋转，可以调整left和top的值 */
/* .ball {
  left: calc(50% - 25px); /* 将小球向左移动一半球直径 */
  top: calc(50% - 25px); /* 同样向下移动 */
}

在这个例子中，`.ball`元素会从原点开始绕自身中心无限旋转。如果你想改变旋转中心，只需调整`position`, `left`, 和 `top` 属性。