如何让元素隐藏在边框后方？旋转加载动画实现求助

API 探路者

2026-7-15

解决方案：带有贯穿线条的旋转加载动画

问题分析

你的代码中，线条的左右移动动画与容器的旋转动画冲突，导致线条无法呈现出稳定的贯穿效果。需要调整线条的定位方式，移除不必要的位移动画，让线条保持在中心位置。

方案1：静态贯穿线条 + 旋转圆环

这种效果是让固定的竖线贯穿中心，圆环在后方旋转，视觉上呈现圆环穿过线条的效果：

<div class="spinner-wrapper">
  <div class="rotate-ring"></div>
  <div class="center-line"></div>
</div>

.spinner-wrapper {
  position: relative;
  width: 248px; /* 圆环宽度120px + 两侧边框各64px */
  height: 248px;
  margin: 0 auto;
}

.rotate-ring {
  border: 64px solid #363636;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1.36s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
}

.center-line {
  width: 10px;
  height: 100%;
  background: blue;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 1; /* 让线条显示在圆环上方 */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

方案2：随圆环旋转的中心线条

如果希望线条和圆环一起旋转，保持贯穿中心的状态：

<div class="rotate-container">
  <div class="center-line"></div>
</div>

.rotate-container {
  border: 64px solid #363636;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1.36s linear infinite;
  position: relative;
  margin: 0 auto;
}

.center-line {
  width: 10px;
  /* 线条高度覆盖圆环整体（含边框） */
  height: calc(100% + 128px);
  background: blue;
  position: absolute;
  left: 50%;
  top: -64px; /* 向上偏移边框高度，让线条完全贯穿 */
  transform: translateX(-50%);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}