如何调整CSS停止线动画 使其仅从关于我板块上方边框位置启动

解决方案 #

你可以通过调整动画的定位上下文来修改起始位置，具体操作步骤如下：

• 第一步：给「关于我」板块添加定位上下文，为其设置position: relative属性，让内部绝对定位元素以该板块为定位基准，而非整个页面视口

  .about-section {
    position: relative;
    /* 保留你原有关于我板块的其他样式 */
    border-top: 1px solid #eee; /* 该边框即为动画起始位置的参照基准 */
  }
  

• 第二步：修改停止线动画元素的定位属性，将其放在「关于我」板块的DOM结构内部，同时调整初始定位和动画关键帧：

  /* 动画元素样式 */
  .stop-line {
    position: absolute;
    top: 0; /* 对应父级「关于我」板块的顶部边框位置 */
    left: 0;
    width: 100%;
    height: 2px;
    background: #f00;
    animation: stopLine 2s linear infinite;
  }
  
  /* 动画关键帧调整 */
  @keyframes stopLine {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(100%); /* 可根据需求调整移动距离，100%代表和「关于我」板块高度一致 */
      opacity: 0;
    }
  }
  

• 如果你不想修改DOM结构把动画元素放进「关于我」板块，也可以用JS动态计算偏移量实现：

  const aboutSection = document.querySelector('.about-section')
  const offsetTop = aboutSection.offsetTop
  document.documentElement.style.setProperty('--about-top-offset', `${offsetTop}px`)
  

  对应CSS调整：

  .stop-line {
    top: var(--about-top-offset);
  }
  

内容的提问来源于stack exchange，提问作者Tom Yotwongjai