Question

我正在为自己的作品集编写代码。我想编写一个简单的动画，然后将其应用于标题。下面是代码。它不能在Chrome（v85）中使用。有人请帮助

.sm-heading {
  margin-bottom: 2rem;
  padding: 0.2rem;
  background: rgba(lighten($primary-color, 1), 0.15);
  animation: heading;
  animation-duration: 5s;
}

@keyframes heading {
  0% {
    top: -1000px;
  }
  100% {
    top: 200px;
  }
}

<main id="home">
  <h1 class="lg-heading">
    Man<span class="text-secondary">ash</span>
  </h1>
  <h2 class="sm-heading">
    Software Developer & Amateur Photographer
  </h2>
</main>

Answer 1

您必须设置position: absolute;

.sm-heading {
    position: absolute;
    margin-bottom: 2rem;
    padding: 0.2rem;
    background: rgba(lighten($primary-color, 1), 0.15);
    animation: heading;
    animation-duration: 5s;
}

@keyframes heading {
    0% { top: -100px; }
    100% { top: 200px; }
}

  <h1 class="lg-heading">
      Man<span class="text-secondary">ash</span>
  </h1>
  <h2 class="sm-heading">
      Software Developer & Amateur Photographer
  </h2>

Answer 2

.sm-heading {
        margin-bottom: 2rem;
        padding: 0.2rem;
        background: rgba(lighten($primary-color, 1), 0.15);
        position: relative; /**css top,right,bottom,left value works when you mention position**/
        animation: heading;
        animation-duration: 5s;
    }

@keyframes heading {
    0% { top: -1000px; }
    100% { top: 200px; }
}

<h1 class="lg-heading">
            Man<span class="text-secondary">ash</span>
        </h1>
        <h2 class="sm-heading">
            Software Developer & Amateur Photographer
        </h2>

您需要在应用最高价值的位置添加“ position：relative”。

为什么以下代码无法在Chrome中运行

2 个答案: