Адаптивное изображение с анимированным висящим ключом CSS, которое должно оставаться на месте - PullRequest
Новая
       13

Адаптивное изображение с анимированным висящим ключом CSS, которое должно оставаться на месте

0 голосов
/ 11 сентября 2018

Добрый день,

Я пытаюсь сделать хорошую анимацию для сайта. Это должно быть относительно просто. Итак, я нарисовал руку и ключи от машины BMW. Использовал код css, чтобы заставить его качаться, и да, он работает.

BMW car keys offered by hand

Однако это отзывчиво, но не так, как я хочу. Я бы хотел, чтобы ключ оставался там, где он есть. Тем не менее, он перемещается практически куда угодно в зависимости от размера экрана.

Конечно, я могу использовать размер экрана в css. Но я не хочу использовать размер экрана. Я хочу иметь возможность размещать анимацию в любом месте, где бы я хотел.

Однако при изменении размера клавиша перемещается также куда угодно, где бы она ни находилась: - /

Возможно, мой подход совершенно неверен. Но на данный момент это то, что я мог бы придумать. Может быть, это правильно. Но я надеюсь, что кто-нибудь скажет мне, где и как исправить мои ошибки.

Мой HTML-код (конечно же, в заголовке есть ссылка на загрузку и другие) 

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

1 Ответ

0 голосов
/ 11 сентября 2018

Удаление min-height: 900px из .key_hand и замена pt на % для top позиционирования .key_hand > .bmw_key, это должно быть здорово. Вот результат

Надеюсь, это будет похоже на то, что вы ждали, и браво для вашего рисунка!

...