• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Анимация текста в поле ввода на чистом CSS (Как использовать переменные CSS для анимации)
Анимация текста в поле ввода на чистом CSS
Kosten
Дата: Четверг, 2021-03-25, 02:40 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38130
Награды: 65


Вашему вниманию анимация, которая ориентированная на ввод данных на чистом CSS. Где при клике строка ввода приобретает совершенно другой оттенок цвета, что можно установить такой эффект, где нужно вводить данные.

Это пример анимации, ориентированной на CSS. В CSS 3 появились новые модели переходов и анимации. Теперь вы можете создавать анимацию без использования Javascript или Flash.



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;
}

Переходы в CSS3 дают возможность изменять внешний вид и поведение элемента всякий раз, когда происходит изменение состояния, например, когда он наведен, сфокусирован, активен или нацелен.

Демонстрация
Прикрепления: 6477999.png(3.7 Kb) · focused-animati.zip(2.6 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Анимация текста в поле ввода на чистом CSS (Как использовать переменные CSS для анимации)
  • Страница 1 из 1
  • 1
Поиск: