• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Анимация появление ввода текста в CSS (Сфокусированная анимация введения текста на CSS)
Анимация появление ввода текста в CSS
Kosten
Дата: Вторник, 2019-11-12, 21:02 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25239
Награды: 57


Это пример 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. Убедитесь, что цвет и эффект соответствуют вашей веб-странице.

Демонстрация
Прикрепления: 0034712.png(5.9 Kb) · desamilas.zip(2.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Анимация появление ввода текста в CSS (Сфокусированная анимация введения текста на CSS)
  • Страница 1 из 1
  • 1
Поиск: