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

Анимированное окно поиска сайта на CSS

Анимированное окно поиска сайта на CSS
Красиво выполнена анимация на поле поиска для сайта с помощью CSS, где изначально видим кнопку, но при наведении курсора появляется основа формы. Такой стиль формы будет отлично смотреться на оригинальном дизайне, где как можно заметить, что по умолчанию мы наблюдаем кнопку со шрифтовым значением, который обозначает поиск по сайту. Но только стоит навести клик, как появляется форма в уникальной анимации.

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

При открытие страницы:

Кнопка поиска для сайта

С наведением курсора на основание:

Поиск с красивой анимацией на чистом CSS

Установка:

HEAD

Код
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

HTML

Код
<div class="poiskovaya_sistema">
  <input type="text" name="search" placeholder="Поиск..." class="kesunaya_poiskovik">
  <a href="#" class="format_poiska">
  <i class="fas fa-search"></i>  
  </a>
  </div>

CSS

Код
.poiskovaya_sistema{
  background: #fff;
  height: 30px;
  border-radius: 30px;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.8s;
  box-shadow: 4px 4px 6px 0 rgba(255,255,255,.3),
  -4px -4px 6px 0 rgba(116, 125, 136, .2),  
  inset -4px -4px 6px 0 rgba(255,255,255,.2),
  inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}

.poiskovaya_sistema:hover > .kesunaya_poiskovik{
  width: 400px;
}

.poiskovaya_sistema .kesunaya_poiskovik{
  background: transparent;
  border: none;
  outline:none;
  width: 0px;
  font-weight: 500;
  font-size: 16px;
  transition: 0.8s;

}

.poiskovaya_sistema .format_poiska .fas{
  color: #5cbdbb;
}

@keyframes hoverShake {
  0% {transform: skew(0deg,0deg);}
  25% {transform: skew(5deg, 5deg);}
  75% {transform: skew(-5deg, -5deg);}
  100% {transform: skew(0deg,0deg);}
}

.poiskovaya_sistema:hover{
  animation: hoverShake 0.15s linear 3;
}

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

Демонстрация
2020-10-27 Загрузок: 2 Просмотров: 299 Комментарий: (0)

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

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

Оставь свой отзыв

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