Question

我试图找到一种方法，让特定网页的第一个标题和段落在淡入时同时从顶部翻译到位。

我已经研究过使用@keyframes，这看起来肯定是解决方案。但话虽如此，我还没有找到一种方法来翻译元素而不指定要翻译的设定距离。相反，我只是想将元素从顶部转换到它们当前的位置（或者它们原本会在哪里）。

以下是我的网站供参考：http://thefloodplains.com/About.html。我目前有第二部分淡入（没有翻译），但我希望顶部从顶部淡入。

基本上我想做的是：https://www.w3schools.com/CSSref/tryit.asp?filename=trycss3_keyframes，但没有指定数量的像素需要翻译 - 我只想将其从顶部翻译成当前位置。

这是另一个类似的例子，但我不想要淡出效果（第一个）：https://codepen.io/kianoshp/pen/PPeWzb。

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  75% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

任何和所有帮助将深表感谢。祝你有美好的一天！

Answer 1

.box {
  height: 20rem;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

@keyframes topFadeOut {
  0% {
    position: absolute;
    top: -3rem;
    opacity: 0;
  }

  100% {
    position: absolute;
    top: 25%;
    opacity: 1;
  }
}

h {
  font-size: 45px;
  color: #00A5D1;
  font-family: 'Gentium Basic', Verdana, 'Slabo 27px', 'Vollkorn', serif;
  position: absolute;
  top: 5rem;
  opacity: 1;
  left: 0;
  right: 0;  
  display: flex;
  justify-content: center;
  animation-name: topFadeOut;
  animation-duration: 5s;
}

  <section class="box">
    <h>The Floodplains</h>
  </section>

从顶部向下移动/平移时淡入元素的方法是什么？

1 个答案: