基于Bootstrap 4实现环绕圆形轨道旋转的图片及悬停文本展示

我来帮你搞定这个需求！结合Bootstrap 4的栅格系统，我们可以用CSS动画和定位来实现图片绕轨旋转、悬停交互的效果，同时保证响应式适配。下面是完整的实现方案：

完整代码实现 #

HTML结构 #

<div class="col-3 mx-auto position-relative" style="background-color: grey; min-height: 300px;">
  <!-- 中心圆形 -->
  <div class="circle position-absolute top-50 start-50 translate-middle">
    <!-- 中心文本容器 -->
    <div class="center-text text-center text-white d-none">
      对应图片的文本
    </div>
  </div>

  <!-- 环绕图片的旋转容器 -->
  <div class="orbit-container position-absolute top-50 start-50 translate-middle">
    <!-- 环绕图片1 -->
    <div class="orbit-img">
      <img src="images/location/2x/location.png" alt="图片1" class="img-fluid">
      <div class="img-text d-none">对应图片1的文本</div>
    </div>
    <!-- 环绕图片2 -->
    <div class="orbit-img">
      <img src="images/xxx/2x/xxx.png" alt="图片2" class="img-fluid">
      <div class="img-text d-none">对应图片2的文本</div>
    </div>
    <!-- 可继续添加更多图片 -->
  </div>
</div>

CSS样式 #

/* 中心圆形样式 */
.circle {
  width: 80%;
  padding-bottom: 80%;
  border-radius: 50%;
  background: #4679BD;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* 旋转轨道容器 */
.orbit-container {
  width: 100%;
  padding-bottom: 100%;
  animation: rotateOrbit 20s linear infinite;
  transform-origin: center center;
}

/* 单个环绕图片的基础定位 */
.orbit-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 20%;
  cursor: pointer;
}

/* 给每个图片设置不同旋转角度，均匀分布在轨道上 */
.orbit-img:nth-child(2) {
  transform: translate(-50%, -100%) rotate(90deg);
}
.orbit-img:nth-child(3) {
  transform: translate(-50%, -100%) rotate(180deg);
}
.orbit-img:nth-child(4) {
  transform: translate(-50%, -100%) rotate(270deg);
}

/* 反向旋转图片，抵消轨道旋转让图片保持正立 */
.orbit-img img {
  transform: rotate(0deg);
}
.orbit-img:nth-child(2) img {
  transform: rotate(-90deg);
}
.orbit-img:nth-child(3) img {
  transform: rotate(-180deg);
}
.orbit-img:nth-child(4) img {
  transform: rotate(-270deg);
}

/* 无限旋转动画 */
@keyframes rotateOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 悬停交互效果 */
.orbit-container:hover {
  animation-play-state: paused;
}
.orbit-img:hover ~ .circle .center-text {
  display: block;
}
/* 若需不同图片显示不同文本，可结合JS动态替换center-text内容 */

/* 响应式适配 */
@media (max-width: 768px) {
  .orbit-img {
    width: 25%;
  }
  .circle {
    width: 70%;
    padding-bottom: 70%;
  }
}

关键细节解释 #

• 无限旋转实现：通过@keyframes rotateOrbit定义360度匀速旋转动画，给轨道容器添加animation: rotateOrbit 20s linear infinite，linear保证旋转速度均匀，infinite实现循环效果。
• 图片环绕对齐：每个图片通过transform: translate(-50%, -100%) rotate(Ndeg)定位到轨道上，再给图片反向旋转相同角度，确保图片始终正立。你可以根据图片数量调整间隔角度（比如4张图就间隔90度）。
• 悬停交互：鼠标悬停在轨道容器上时，用animation-play-state: paused暂停旋转；通过CSS选择器触发中心文本显示，若需要不同图片对应不同文本，可结合JavaScript动态替换中心文本内容。
• 响应式布局：依托Bootstrap 4的col-3栅格类，配合百分比单位和媒体查询，在小屏幕上自动调整图片和圆形尺寸，确保在容器内完美适配。

内容的提问来源于stack exchange，提问作者Lokesh Pandey