html - 使动画背景图像与其余对象一起缩放？

Question

我一直在研究这个标志动画。您会注意到，如果您使窗口宽度变小，则 Logo 是响应式的。然而，动画糖果背景图像显示在底部。调整窗口大小时，我很难将它“隐藏”在顶部对象后面。所以我试图隐藏它或让它缩放/响应以避免这个问题

有什么想法吗？

这是我的代码:JS FIDDLE

@keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-webkit-keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-ms-keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-moz-keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
  /* set this to the height of the image */
}

@-webkit-keyframes Wobble {
  from {
    -webkit-transform: rotate(6deg);
  }
  to {
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-6deg);
  }
}

.candyWobble {
  -webkit-animation: Wobble ease-in-out 0.7s infinite alternate;
}

.candy-animate-wrap {
  width: 255px;
  position: absolute;
  height: 200px;
  overflow: hidden;
  border-radius: 100%;
  top: 30px;
}

#animate-area2 {
  width: 213px;
  height: 956px;
  display: flex;
  position: absolute;
  background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg);
  background-position: 0 0;
  background-repeat: repeat-y;
  max-width: 277px;
  animation: animatedBackground2 8s infinite linear;
  -ms-animation: animatedBackground2 8s infinite linear;
  -moz-animation: animatedBackground2 8s infinite linear;
  -webkit-animation: animatedBackground2 8s infinite linear;
}

<div class="candyCo-VSSlogo">
  <img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png" style="width:100%;max-width:277px; position:absolute;z-index:2;">
  <img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;">
  <div class="candy-animate-wrap">
    <div id="animate-area2"></div>
  </div>
</div>

谢谢!

Answer 1

我使用了 padding-bottom 技巧，它有助于在您的元素中获得恒定的纵横比(它与父宽度相关，而不是与父高度相关)。

此外，还需要更改其他几种样式...太多了，无法列出详细的列表。

查看结果:

@keyframes animatedBackground2 {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 0px 956px;
  }
}

@-keyframes Wobble {
  from {
    transform: rotate(6deg);
  }
  to {
    transform: rotate(-6deg);
  }
}

.candy {
  width: 100%;
  max-width: 277px;
  position: relative;
}

.candyWobble {
  animation: Wobble ease-in-out 0.7s infinite alternate;
  width: 100%;
  max-width: 277px;
  position: absolute;
  z-index: 2;
}

.candy-animate-wrap {
  width: 255px;
  position: absolute;
  height: 0px;
  overflow: hidden;
  border-radius: 100%;
  top: 0px;
  padding-bottom: 99%;
  max-width: 100%;
}

#animate-area2 {
  top: 0px;
}

#animate-area2 {
  width: 213px;
  height: 956px;
  display: flex;
  position: absolute;
  background-image: url(https://vapesocietysupplies.com/wp-content/uploads/2017/05/scbg-2.jpg);
  background-position: 0 0;
  background-repeat: repeat-y;
  max-width: 277px;
  animation: animatedBackground2 8s infinite linear;
}

<div class="candy">
  <img class="candyWobble" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-textlogo-1.png">
  <img class="cover" src="https://vapesocietysupplies.com/wp-content/uploads/2017/05/CanyCo-VSS-Cover-bg.png" style="width:100%;max-width:277px;position:absolute;z-index:1;">
  <div class="candy-animate-wrap">
    <div id="animate-area2"></div>
  </div>
</div>