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

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

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

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

Рассмотрим поиск при открытие страницы:

Здесь уже наведенный курсор на основу поиска:

Создание поиска для сайта с помощью CSS и HTML

Установка:

HTML

Код

<html>
<head>
  <title>Анимированная панель поиска с использованием HTML и CSS</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <form action="">
  <input type="search">
  <i class="fa fa-search"></i>
  </form>
</body>
</html>

CSS

Код

form{
  position: relative;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  transition: all 1s;
  width:50px;
  height:50px;
  background-color: white;
  border-radius: 30px;
  border:4px solid white;
  padding:5px;
}
input{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:42.5px;
  line-height: 30px;
  outline:0;
  border:0;
  display: none;
  font-size: 1em;
  border-radius: 18px;
  padding: 0px 18px;
}
.fa {
  padding: 11px;
  width: 43px;
  height: 43px;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 50%;
  color: #49475f;
  text-align: center;
  font-size: 1.3em;
  transition: all 1s;
}
form:hover{
  width:214px;
  cursor: pointer;
}
form:hover input{
  display: block;
}
form:hover .fa {
  background-color: #3f3c56;
  color: #f9e3e3;
}

Это форма поиска, созданная с использованием HTML и стилистики CSS. Где при помощи CSS задействована кнопка и иконкой лупы, которые имеет эффект анимации, что можно преобразовать в стрелку вправо при наведении курсора.

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

25 Января 2021 Загрузок: 2 Просмотров: 1928 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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