Выпадающие подсказки при поиске можно довольно красиво обыграть. Как? Сейчас расскажу.

Для начала попробуйте ввести текст в окно поиска ниже. Если вам понравился эффект, можете читать дальше.

Если на вашем сайте уже есть выпадающий поиск, но выпадает он не так красиво, то для выпадающей области можно прописать следующий код

Это стиль для анимации появления

  -webkit-transform-origin: top;
          transform-origin: top;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s, opacity 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.3s, -webkit-transform 0.6s cubic-bezier(0.68, -0.55, 0.39, 1.3) -0.2s;

А это анимация скрытия

 -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  pointer-events: none;
  -webkit-transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s;
  transition: transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09), opacity 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09) 0.1s, -webkit-transform 0.6s cubic-bezier(0.71, -0.22, 0.33, 1.09);
Готовы сделать всю работу за Вас
от500
  • 30 минут


Поработаем?

Опишите свой запрос, мы расчитаем стоимость вашей задачи.