Блог

Главная - Вопросы по программированию - Как мне закодировать объект, перемещающийся / покидающий слева направо на экране?

Как мне закодировать объект, перемещающийся / покидающий слева направо на экране?

#html #css

#HTML #css

Вопрос:

Я пытаюсь закодировать поезд, покидающий «станцию», но я не уверен, с чего начать. Моя идея требует, чтобы поезд появлялся слева и исчезал в правой части экрана. Я вставил изображение эскиза, который я сделал для этой концепции.

введите описание изображения здесь

Комментарии:

1. Вы можете начать с чтения об анимации HTML и CSS. Проверьте это: w3schools.com/cssref/css3_pr_animation.asp

Ответ №1:

Вы можете узнать о CSS translate (преобразовании) на https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate ()

Полезная функция translate заключается в том, что вы можете перемещать элемент на% от его размера.

Итак, для вашего поезда вы можете начать, если он выключен при translateX (-100%), что означает, что он находится слева от окна просмотра, вне сайта.

Затем вы хотите переместить его в правую часть окна просмотра, чтобы перевести его на 100 Ввт;

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

 * {
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

.train {
  width: 50px;
  height: 30px;
  background-color: red;
  display: inline-block;
  transform: translateX(-100%);
  animation-name: chug;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes chug {
  0% {
    transform: translateX(-100%);
  }
  25% {
    transform: translateX(50vw);
  }
  75% {
    transform: translateX(50vw);
  }
  100% {
    transform: translateX(100vw);
  }
} 
 <div class="train"></div>

ОБНОВЛЕНИЕ: в ключевых кадрах была поставлена пауза между 25% и 75% поезд остается на том же месте, прежде чем снова тронуться.

Комментарии:

1. Большое вам спасибо, это очень помогло. У меня также есть еще один вопрос, если бы вы могли мне помочь, было бы также идеально, если бы я мог остановить этот «поезд» посередине. Есть ли у вас какие-либо предложения о том, как это сделать?

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

3. Еще раз спасибо, это выглядит именно так, как я имел в виду. Каковы были причины для процентных соотношений, которые вы добавили в ключевых кадрах? 25% и 75%?

4. Только то, что заставляет поезд останавливаться на половину анимации. Вы, конечно, выбираете то, что хотите, и вам также нужно изучить тип движения (легкое, линейное и т. Д.), Чтобы хорошо соответствовать поезду.

5. У вас, случайно, тоже есть идея, как я могу заставить эту анимацию поезда воспроизводиться в определенное время суток?

Метки: ,