带有 CSS 动画悬空键的响应式图像应保持响应式

Question

美好的一天，

我正在尝试为网站制作精美的动画。应该比较简单。所以我画了一只手和一把宝马车钥匙。使用 css 代码使其摆动，是的，它有效。

但是它反应灵敏，但不是我想要的方式。我希望钥匙留在原处。然而，它会根据屏幕尺寸移动到任何地方。

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

然而，当调整大小时，键也会移动到它想要的任何地方:-/

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

我的HTML代码（当然bootstrap和其他的都在header中链接了）

@-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

把.key_hand中的min-height: 900px去掉，.key_hand > .bmw_key的top定位用%代替pt，应该不错. Here is the result

希望它看起来像您所期待的那样，祝您画得漂亮！

带有 CSS 动画悬空键的响应式图像应保持响应式

Responsive image with CSS animated dangling key that should stay responsively in place

html

css

twitter-bootstrap

responsive