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

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

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

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

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

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

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

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

Установка:

HEAD

Код

HTML

Код

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

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

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

27 Октября 2020 Загрузок: 2 Просмотров: 976 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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