Question

我希望实现放大背景图像的效果，就像完成here一样。

我有一个占用整个页面的div。我有一个全屏背景图像。我需要让图像放大和缩小，或者从左向右移动，我尝试使用keyframes这是我第一次使用它们所以我不知道如何实现缩放效果在背景图像上。使用我的代码，div中的所有元素也可以放大和缩小，而不仅仅是背景图像。如何避免这种情况，只需放大背景图像，不缩小并影响页面上的其他元素？

这是我的css：

#app {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: url('/img/cover.png');
  background-size: cover;
  background-position:center center;
  animation: zoom 30s infinite;
}

@keyframes zoom {
  0% { transform:scale(1,1); }
  50% { transform:scale(1.2,1.2); }
  100% {
      transform:scale(1,1);
  }
}

和html：

<div id="app">

    <div id="main-section">
      ...
    </div>

    <div id="drawer">
      <div id="item-detail">
      </div>
      <div id="item-detail-carousel">
        ...
      </div>
    </div>

    <div class="large-10 large-centered columns content">
      content ..
    </div>
  </div>

Answer 1

您可以执行以下操作：

body {
    min-height:100%
}
#app {
    position: relative;
    height: 100%;
    width: 100%;
    overflow:hidden;
}
.background {
    position:absolute;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    animation: zoom 30s infinite;
}
@keyframes zoom {
    0% { transform:scale(1,1); }
    50% { transform:scale(1.2,1.2); }
    100% { transform:scale(1,1); }
}

和HTML：

<div id="app">
    <img class="background" alt="Bg" src="image-surce.jpg"/>
    <div id="main-section">
      ...
    </div>

    <div id="drawer">
      <div id="item-detail">
      </div>
      <div id="item-detail-carousel">
        ...
      </div>
    </div>

    <div class="large-10 large-centered columns content">
      content ..
    </div>
</div>

这是一种更好的方法，您使用图像标记并使用您的CSS技能将其作为背景，然后您可以对图像应用缩放。所以它显示了预期的效果。

CSS - 关键帧仅转换背景图像的比例

1 个答案: