ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная поисковая форма с эффектом

Анимированная поисковая форма с эффектом

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

Так вам еще нужно ключевое слово написать, для этого и предназначен маркер, где аналогично по клику подсказка будет съезжать в низ, и остается пустое поле, которое нужно заполнить. Что по оттенку цвета, то основной здесь идет зеленый оттенок, который при случай можно быстро изменить в стилистике CSS. которая закреплена за материалом.

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

Анимированная форма поиска с помощью jQuery и CSS3

Анимированная форма поиска с помощью jQuery и CSS3

Здесь вы кликнули по фигуре, и сразу появилась форма, где можно заполнять.

Отсталость прописать то, что вы хотите найти на интернет ресурсе.

Приступаем к установке:

HTML

Код

<div class="danimated-kaseabox">
  <div class="supanding">
  <i class="fa fa-search" aria-hidden="true"></i>
  </div>
  <div class="tedsanum">
  <label id="akipolas">Введите ваше ключевое слово</label><br>
  <input type="text" class="poiskovik">
  </div>
</div>

CSS

Код

.danimated-kaseabox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.supanding {
  text-align: center;
  width: 435px;
  margin-bottom: 10px;
}

.supanding .fa {
  color: #51d866;
  font-size: 28px;
  cursor: pointer;
}

.tedsanum {
  width: 435px;
  height: 100px;
  padding: 0 18px;
  box-sizing: border-box;
}

.poiskovik {
  width: 398px;
  border: 0px;
  background: transparent;
  box-sizing: border-box;
  border-bottom: 3px solid #4ddc64;
  outline: none;
  padding: 0 18px 10px;
  color: #e4e4e4;
  font-size: 19px;
  transition: all 0.7s ease;
  transform: scale(0);
}

#akipolas {
  color: #e4e4e4;
  position: relative;
  top: 17px;
  left: 5px;
  opacity: 0;
  letter-spacing: 1px;
  transition: all 0.7s ease;
}

#akipolas.sakidsorm {
  opacity: 1;
}

.poiskovik.sakidsorm {
  transform: scale(1);
}

#akipolas.kamukeb {
  top: 58px;
  left: 18px;
  font-size: 12px;
}

@media screen and (max-width: 640px) {
  .supanding,
  .tedsanum {
  width: 297px;
  }
  .poiskovik {
  width: 257px;
  }
  #akipolas {
  left: 30px;
  font-size: 12px;
  }
}

Код

$(".poiskovik").focus(function() {
  $("#akipolas").addClass("kamukeb");
});
$(".poiskovik").focusout(function() {
  $("#akipolas").removeClass("kamukeb");
  $(".poiskovik").val("");
});

$(".fa-search").click(function() {
  $(".poiskovik").toggleClass("sakidsorm");
  $("#akipolas").toggleClass("sakidsorm");
});

Также идет архив, это полная установка, как показано на demo странице. что можно изначально посмотреть в работе полный функционал, также все элементы эффекта.

Демонстрация

03 Декабря 2018 Загрузок: 1 Просмотров: 1303 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0