Блог

В настоящее время я работаю над веб-сайтом, и у меня есть два поля ввода. Я хочу, чтобы они перемещались в середину со стороны страницы при обновлении страницы (или при переходе на веб-сайт). Как я могу это сделать? Может быть, с помощью Javascript?

Вот мои два ввода:

   <input type="text" id="username" name="username" placeholder="username"><br><br><br>
  <input type="password" id="password" name="password" placeholder="password"><br><br><br>
  <form action="profile.html">
    <input type="submit" value="login" id="submit">
  </form>
 

Вы можете сделать это с помощью CSS keyframes без javascript

 input{
  animation: 1s ease-out 0s 1 slideInFromLeft;

}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
} 

   <input type="text" id="username" name="username" placeholder="username"><br><br><br>
  <input type="password" id="password" name="password" placeholder="password"><br><br><br>
  <form action="profile.html">
    <input type="submit" value="login" id="submit">
  </form> 

Вы можете использовать функцию jQuery animate для обновления свойств CSS.

Пример кода:

 $('#username').animate({display: 'block'}, 'fast');
 

Вы можете обновить дополнительные свойства css :

 $('#username').animate({display: 'block', font-size: '22px'}, 'fast');
 

Подробнее о функции анимации jQuery

Или вы можете использовать библиотеку под названием Animate CSS:

Библиотека анимации

Надеюсь, это будет полезно.