时间戳

首页 > 解决方案 > 发出动画形状而不在底部留下大的间隙等 - CSS/HTML

html - 发出动画形状而不在底部留下大的间隙等 - CSS/HTML

问题描述

我目前正在尝试显示在同一容器内的其他 div 后面动画的形状。一切看起来都很好，直到我添加其他内容（在同一区域内部或外部）

预期的结果是看起来像这样，下面有空间，以允许添加其他内容而没有设置巨大的空白空间和负边距（就像我目前对形状所做的那样）：

https://media2.giphy.com/media/TJs23q70cgnyxAwJsA/giphy.gif

我目前得到的更像是这样的：

https://media3.giphy.com/media/JNshdMa1gEdtmsnDYI/giphy.gif

这是我目前正在实施的代码（针对这个特定区域）：

/* Blog Section */

#blog-section {
  padding-top: 7rem;
  height: 100%;
}

.blog-display {
  display: flex;
  margin: auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.blog-img img {
  text-align: center;
}

.blog-text {
  margin: auto 5rem;
  color: white;
}

.blog-text a {
  color: white;
}

.blog-plate {
  background: #0c3445;
  top: -800px;
  height: 700px;
  max-width: 100%;
  position: relative;
  animation: 20s ease-in 7s infinite blogmove;
  animation-direction: alternate-reverse;
}

@keyframes blogmove {
  0% {
    left: 0px;
    top: -800px;
  }
  25% {
    left: 0px;
    top: -705px;
  }
  50% {
    left: 0px;
    top: -600px;
  }
  75% {
    left: 0px;
    top: -705px;
  }
  100% {
    left: 0px;
    top: -800px;
  }
}


/* Recipe Section */

#recipe-section {
  padding-top: 7rem;
}
<section id="blog-section">
  <div class="container">
    <div class="blog-display">
      <div class="blog-img">
        <img src="https://i.imgur.com/NEbj5nR.jpg" alt="blog1">
      </div>
      <div class="blog-text">
        <h3>New Book By H. G. Cayton</h3>
        <p>If you haven’t been backing up to iCloud but have backed up your phone to iTunes on your Mac or PC (or to Finder, if you’re running macOS Catalina), you may be able to recover your text messages from there. And even if you think you didn’t back
          up your messages, it’s worth a few […]</p>

        <a href="#">Read More</a>
      </div>
    </div>
  </div>


  <!-- This is the background shape I am animating -->
  <div class="blog-plate"></div>
  <div class="container">
    <div class="another-section">
      Content within the same section
      <!-- Added content here is pushed further down below -->
    </div>
  </div>

</section>

<section id="recipe-section">
  <div>
    Next Section Here, Why am I so far down?
  </div>
</section>

感谢您提供的任何帮助。

最好的，

标签： htmlcssanimation

解决方案

根据我从您的问题中得到的信息，您希望形状在上半部分后面进行动画处理，图像和内容并排排列，同时不希望在该块之后出现额外的空白。因此，如果我是对的，那么您可以通过将动画形状包装在另一个 div 中并放置它来实现这一点，position:absolute;而不是position:relative;因为使用位置relative并给出它top:-800px;是创建该 div 之后的空白的主要原因。试试下面的代码，如果有帮助，请告诉我，我也对以下代码做了一些更改keyframes：-

HTML

<section id="blog-section">
  <div class="plate-wrap">
  <div class="container">
    <div class="blog-display">
      <div class="blog-img">
        <img src="https://i.imgur.com/NEbj5nR.jpg" alt="blog1">
      </div>
      <div class="blog-text">
        <h3>New Book By H. G. Cayton</h3>
        <p>If you haven’t been backing up to iCloud but have backed up your phone to iTunes on your Mac or PC (or to Finder, if you’re running macOS Catalina), you may be able to recover your text messages from there. And even if you think you didn’t back
          up your messages, it’s worth a few […]</p>

        <a href="#">Read More</a>
      </div>
    </div>
  </div>
  <!-- This is the background shape I am animating -->
  <div class="blog-plate"></div>
  </div><!-- ./plate-wrap -->


  <div class="container">
    <div class="another-section">
      Content within the same section
      <!-- Added content here is pushed further down below -->
    </div>
  </div>

</section>

<section id="recipe-section">
  <div>
    Next Section Here, Why am I so far down?
  </div>
</section>

CSS

#blog-section {
  width: 100%;
}
.plate-wrap{
  padding-top: 7rem;
  position: relative;
  padding-bottom: 7rem;
}
.blog-display {
  display: flex;
  margin: auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

.blog-img img {
  text-align: center;
}

.blog-text {
  margin: auto 5rem;
  color: white;
}

.blog-text a {
  color: white;
}

.blog-plate {
  background: #0c3445;
  top: 0;
  height: 80%;
  max-width: 100%;
  width:100%;
  position: absolute;
  animation: 20s ease-in 7s infinite blogmove;
  animation-direction: alternate-reverse;
}

@keyframes blogmove {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 0px;
    top: 20%;
  }
  100% {
    left: 0px;
    top: 0;
  }
}
/* Recipe Section */
#recipe-section {
  padding-top: 7rem;
}

我还用相同的代码制作了一个 jsfiddle 供您参考，您可以在此处查看

希望它可以帮助你。

推荐阅读