Как создать 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.