HTML/CSS实现居中对齐的平滑箭头动画问题求助

问题根源 #

你之前的代码用固定像素值（如top:50px、left:80px）定位线条，这些值依赖容器边框的视觉参考，一旦移除边框或容器尺寸变化，线条就会偏离中心。要解决这个问题，必须让线条基于容器绝对居中，所有动画都围绕这个中心基准点展开。

核心修改步骤 #

1. 给所有线条添加绝对居中基础定位
   在.line类中加入绝对居中代码，让线条默认以容器中心为原点：

   .line {
       position: absolute;
       background-color: var(--line-color);
       border-radius: 50px;
       /* 绝对居中核心：让线条中心与容器中心重合 */
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   

2. 调整竖线（.l1）的动画逻辑
   以容器中心为基准，调整动画的高度和位移，让竖线从中心向上收缩，再向下延伸，最后收起：

   .l1{
       animation: drawLine 2s linear infinite;
       width: 10px;
   }
   @keyframes drawLine {
       0% {
           height: 2px;
           /* 向上收缩，中心保持偏移对齐 */
           transform: translate(-50%, -100%);
       }
       50% {
           height: 70px;
           /* 向下延伸，顶部固定在中心上方 */
           transform: translate(-50%, -100%);
       }
       100% {
           height: 0px;
           /* 收起到底部，中心回到容器中心 */
           transform: translate(-50%, 0%);
       }
   }
   

3. 调整两条斜线（.l2、.l3）的动画逻辑
   修改transform-origin为线条的底部中心，动画围绕容器中心展开，避免固定left/right值：

   .l2{
       transform-origin: bottom center;
       animation: drawAndEraseDiagonal 2s linear infinite; 
       height: 10px;
   }
   @keyframes drawAndEraseDiagonal {
       0% {
           width: 2px;
           transform: translate(-50%, -50%) rotate(45deg);
       }
       50% {
           width: 40px;
           transform: translate(-50%, -50%) rotate(45deg);
       }
       100% {
           width: 2px;
           transform: translate(-50%, 0%) rotate(45deg);
       }
   }
   
   .l3{
       transform-origin: bottom center;
       animation: drawAndEraseDiagonal1 2s linear infinite; 
       height: 10px;
   }
   @keyframes drawAndEraseDiagonal1 {
       0% {
           width: 2px;
           transform: translate(-50%, -50%) rotate(-45deg);
       }
       50% {
           width: 40px;
           transform: translate(-50%, -50%) rotate(-45deg);
       }
       100% {
           width: 2px;
           transform: translate(-50%, 0%) rotate(-45deg);
       }
   }
   

4. 容器样式优化
   移除border后，线条依然保持完美居中，可根据需求保留或删除overflow: hidden：

   .line-container {
       position: relative;
       width: 200px;
       height: 200px;
       margin-top: 200px;
       overflow: hidden;
       /* border: solid; 可安全移除 */
   }
   

完整修复代码 #

.line-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin-top: 200px;
    overflow: hidden;
}

.line {
    position: absolute;
    background-color: var(--line-color, #000);
    border-radius: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.l1{
    animation: drawLine 2s linear infinite;
    width: 10px;
}

@keyframes drawLine {
    0% {
        height: 2px;
        transform: translate(-50%, -100%);
    }
    50% {
        height: 70px;
        transform: translate(-50%, -100%);
    }
    100% {
        height: 0px;
        transform: translate(-50%, 0%);
    }
}

.l2{
    transform-origin: bottom center;
    animation: drawAndEraseDiagonal 2s linear infinite; 
    height: 10px;
}

@keyframes drawAndEraseDiagonal {
    0% {
        width: 2px;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    50% {
        width: 40px;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    100% {
        width: 2px;
        transform: translate(-50%, 0%) rotate(45deg);
    }
}

.l3{
    transform-origin: bottom center;
    animation: drawAndEraseDiagonal1 2s linear infinite; 
    height: 10px;
}

@keyframes drawAndEraseDiagonal1 {
    0% {
        width: 2px;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    50% {
        width: 40px;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    100% {
        width: 2px;
        transform: translate(-50%, 0%) rotate(-45deg);
    }
}

效果说明 #

• 移除容器边框后，三条线条始终保持完美居中对齐
• 动画流畅度不受影响，所有位移和尺寸变化都围绕容器中心展开
• 容器尺寸调整后，线条会自动适配新的中心位置

内容的提问来源于stack exchange，提问作者TUSK ACT 4