如何防止关键帧在 CSS 中推送我的文本？

Question

我目前希望我网页的顶部有一个缩小的图像。 但是，这会推送我拥有的所有文本，包括按钮和我的 header。我的背景图像正在按照我想要的方式移动，但我的 header 和按钮也在移动，我根本不希望它们移动。

    <div className="static-slider-head banner2">
      <Container>
        <Row className="">
          <Col lg="6" md="6" className="align-self-center intro">
            <h1 className="title">
              Welcome
            </h1>
            <h4 className="subtitle font-light">
            Filler Text
            </h4>
            <a
              href="/"
              className="btn btn-danger m-r-20 btn-md m-t-10 "
            >
              Filler Text
            </a>
            <a
              href="/"
              className="btn btn-success m-r-20 btn-md m-t-10 " target="_blank"
            >
              Filler Text <i className="fa fa-instagram"></i> 
            </a>
          </Col>
          <Col lg="6" md="6">
          </Col>
        </Row>
      </Container>
    </div>

.static-slider-head {
  min-height: 36.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  background-size: cover;
  background-position: center center;
  display: table;
  width: 100%;
  padding: 0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
  background-color: #e5e5e5;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  animation: scale 10s;
  animation-fill-mode: forwards;
  transform-origin: bottom right;
  overflow: hidden;
  .title {
    color: $white;
    font-weight: 700;
    font-size: 70px;
    line-height: 100px;
  }
  .subtitle {
    color: $white;
    line-height: 30px;
  }
}
@keyframes scale {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

我的文本和 header 都向左移动。 我要他们不动。 我只希望图像移动。

Answer 1

所以我要做的是让带有图像的 div 做比例只是它自己的 div，而不是作为父 div。 然后我会将所有内容（减去static-slider-head div）包装到一个容器中，然后将所有这些内容包装到一个主包装器中。

然后，您可以将此代码添加到您的 CSS，这将 position 根据主包装器 div 而不是正在扩展的 div 来显示您的文本。

.container {
  position: absolute;
  top: 0;
  left: 0;
} 

.mainwrap {
  position: relative;
}

这是一个工作示例：

 .static-slider-head { min-height: 36.25rem; display: flex; flex-direction: column; justify-content: center; overflow: auto; background-size: cover; background-position: center center; width: 100%; padding: 0; background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat; background-color: #e5e5e5; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; animation: scale 10s; animation-fill-mode: forwards; transform-origin: bottom right; overflow: hidden; .title { color: $white; font-weight: 700; font-size: 70px; line-height: 100px; }.subtitle { color: $white; line-height: 30px; } }.container { position: absolute; top: 0; left: 0; }.mainwrap { position: relative; } @keyframes scale { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

 <div class="mainwrap"> <div class="static-slider-head banner2"></div> <div class="container"> <Container> <Row class=""> <Col lg="6" md="6" class="align-self-center intro"> <h1 class="title"> Welcome </h1> <h4 class="subtitle font-light"> Filler Text </h4> <a href="/" class="btn btn-danger mr-20 btn-md mt-10 " > Filler Text </a> <a href="/" class="btn btn-success mr-20 btn-md mt-10 " target="_blank" > Filler Text <i class="fa fa-instagram"></i> </a> </Col> <Col lg="6" md="6"> </Col> </Row> </Container> </div> </div>

Answer 2

可能是这样的可能是一种方法：在@keyframes animation 中使用background-size css 属性。

 @keyframes zooming { 0% { background-size: 100% 100%; } 50% { background-size: 300% 300%; } 100% { background-size: 100% 100%; } }.header-with-bg-animation { background-image: url('https://images.unsplash.com/photo-1668462503626-1309916ca702?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2970&q=80'); animation-name: zooming; animation-duration: 4s; animation-iteration-count: infinite; background-repeat: none; background-position: center; width: 100%; height: 200px; }.header-content { color: #FFF; text-align: center; padding: 40px 20px 20px 20px; }.header-content *{ background: rgba(0, 0, 0, .45); }

 <div class="header-with-bg-animation"> <div class="header-content"> <h3>Title</h3> <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown...</p> <a>Click me +1</a> </div> </div>

Answer 3

我使用了以下内容并且能够缩小并保持缩小而不重复。 这个解决方案还帮助我不需要修改位置，也不需要修复样式。

.static-slider-head {
  min-height: 36.25rem;
  display: flex;

  background-color: #D8BAE6;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,1)), url('../../public/top2.png') center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-size: 110%;
  background-position: center center;
  animation: shrink 2s alternate;

  .title {
    color: $white;
    font-weight: 700;
    font-size: 42px;
    line-height: 54px;
  }

  .subtitle {
    color: $white;
    line-height: 30px;
  }
}
@keyframes shrink {
  0% {
    background-size: 100%;
  }
  100% {
    background-size: 110%;
  }
}