Как создать HTML-форму регистрации с эффектами анимации

Мы создадим форму регистрации с эффектами анимации, используя только HTML и CSS. Ниже продемонстрирован конечный результат.

Содержание

HTML-разметка формы

Базовая HTML-разметка нашей формы регистрации.

<form>
<label>
<input name="name" id="name" type="text" required />
<div class="label-text">Full Name</div>
</label>
<label>
<input type="email" name="email" id="email" required />
<div class="label-text">Email</div>
</label>
<label>
<input type="tel" name="phone" id="phone" required />
<div class="label-text">Phone Number</div>
</label>
<button type="submit" value="Submit">Submit</button>
</form> 

Теперь переходим к CSS, с помощью которого стилизуем и анимируем форму регистрации.

Стили CSS

Сначала стилизуем текст label.

label {
display: block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
} 

Затем создадим первый эффект анимации: изменение размера текста label, а также его непрозрачности при клике по полю формы.

/* анимация возврата текста label в нормальное состояние, когда пользователь переходит к другому полю формы */
label .label-text {
  color: #9B9B9B;
  cursor: text;
  font-size: 15px;
  line-height: 20px;
  text-transform: uppercase;
  -moz-transform: translateY(-34px);
  -ms-transform: translateY(-34px);
  -webkit-transform: translateY(-34px);
  transform: translateY(-34px);
  transition: all 0.3s;
}
/* анимация смещения и изменения цвета текста label */
label input:focus + .label-text {
  color: #F0F0F0;
  font-size: 13px;
  margin-top: 10px;
  -moz-transform: translateY(-74px);
  -ms-transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
}

Когда вы кликаете по полю ввода, его ширина также увеличивается.

Следующий CSS-код анимирует ширину поля ввода, когда оно выделяется фокусом ввода.

/* удаляем стили поля ввода */
label input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid #4A4A4A;
  color: white;
  font-size: 20px;
  letter-spacing: 1px;
  outline: 0;
  padding: 5px 20px;
  text-align: center;
  transition: all 0.3s;
  width: 200px;
}/* анимация, когда пользователь кликает по полю ввода */
label input:focus {
  max-width: 100%;
  width: 400px;
}

Обратите внимание, что HTML-разметка формы содержит встроенную валидацию. Создадим анимацию, которая будет появляться, когда обязательное для заполнения поле будет оставлено пустым. Это та же анимация, что и при клике по полю ввода.

/* текст смещается вверх во время валидации */
label input:valid + .label-text {
  font-size: 13px;
  -moz-transform: translateY(-74px);
  -ms-transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
  transform: translateY(-74px);
}

Последнее, над чем нужно поработать, это кнопка.

/* стили кнопки */
button {
  background: transparent;
  color: #F0F0F0;
  border: 2px solid #F0F0F0;
  font-size: 15px;
  letter-spacing: 2px;
  padding: 20px 75px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  margin: 15px 30px;
  -webkit-transition: all 0.4s;
 -moz-transition: all 0.4s;
 transition: all 0.4s;
}button:hover, button:focus {
  background-color: white;
  color: #333333;
}

Это все

Мы создали минималистичную HTML-форму регистрации с простыми, но привлекательными эффектами анимации, используя только CSS.

Данная публикация представляет собой перевод статьи «How to Create an HTML Sign Up Form with Animation Effects» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню