响应式图像与CSS动画悬挂键应该保持响应的位置

Question

美好的一天,

我正在尝试为网站制作一个漂亮的动画.它应该相对简单.所以我画了一只手和一辆宝马车钥匙.使用css代码使其摆动,是的,它是有效的.

然而它是响应但不是我希望它的方式.我希望钥匙留在原地.然而,根据屏幕尺寸,它几乎可以在任何地方移动.

我当然可以使用屏幕尺寸css.但我不想使用屏幕尺寸.我希望能够将动画放在我想要的任何地方.

然而,当调整键的大小时,它也会移动到任何想要的位置: - /

可能我的做法完全错了.但在这一点上,这是我能想到的.也许是对的.但我希望有人可以告诉我在哪里以及如何纠正我的错误.

我的HTML代码(当然bootstrap和其他链接在标题中)

@-webkit-keyframes swinging {
  0% {
    -webkit-transform: rotate(10deg);
  }
  50% {
    -webkit-transform: rotate(-5deg)
  }
  100% {
    -webkit-transform: rotate(10deg);
  }
}

@keyframes swinging {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-5deg)
  }
  100% {
    transform: rotate(10deg);
  }
}

.swingimage {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
  animation: swinging 3.5s ease-in-out forwards infinite;
}

.key_hand {
  /*
        background-image: url('arm_hand.png');
        background-repeat: no-repeat;
        background-size: 100%; */
  min-height: 900px;
}

.key_hand>.complete_arm {
  position: relative;
  width: 100%;
  z-index: 2;
}

.key_hand>.bmw_key {
  position: relative;
  display: inline-block;
  top: -390pt;
  left: 7%;
  z-index: 1;
  width: 10%;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swinging 3.5s ease-in-out forwards infinite;
  animation: swinging 3.5s ease-in-out forwards infinite;
}

<div class="container">
  <div class="row">
    <div class="col-md-12 key_hand">
      <img src="arm_hand.png" class="complete_arm" />
      <img src="complete_bmw_key.png" class="bmw_key" />
    </div>
  </div>
</div>

我创建了以下笔.希望对此案有所了解. https://codepen.io/slalex/pen/GXxMmg

Answer 1

删除min-height: 900px从.key_hand,和更换pt由%为top定位.key_hand > .bmw_key,它应该是很大的.这是结果

希望它看起来像你在等待什么,并为你的绘画勇敢!