Это пример CSS-ориентированной анимации, где с CSS3 развивались новые способы перехода и анимации. Теперь вы можете создавать анимацию без использования JavaScript или Flash. Переходы в CSS3 позволяют изменять внешний вид и поведение элемента всякий раз, когда происходит изменение состояния, например, когда оно находится над, фокусируется, активно или нацелено.
HTML в этом фрагменте прост с классом поля, используемым для ввода. Стили CSS определены для всех элементов HTML. Проверьте эффект, как только вы нажмете на поле ввода. Поле ввода помечено с помощью преобразования, чтобы отобразить анимацию, когда она выбрана и отменила выбор.
HTML
Код
<div class="field"><input type="text" placeholder="Ввод для знаков" />
<div class="line"></div>
</div>
CSS
Код
input {
background: 0;
border: 0;
outline: none;
width: 80vw;
max-width: 400px;
font-size: 1.5em;
transition: padding 0.3s 0.2s ease;
}
input:focus {
padding-bottom: 5px;
}
input:focus + .line:after {
transform: scaleX(1);
}
.field {
position: relative;
}
.field .line {
width: 100%;
height: 3px;
position: absolute;
bottom: -8px;
background: #bdc3c7;
}
.field .line:after {
content: " ";
position: absolute;
float: right;
width: 100%;
height: 3px;
transform: scalex(0);
transition: transform 0.3s ease;
background: #1abc9c;
}
Вы можете использовать это в качестве примера для других полей, если вы используете версию CSS 3. Убедитесь, что цвет и эффект соответствуют вашей веб-странице.
Демонстрация
