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

Демо

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

Концепция

Анимация достигается с помощью служебных классов и псевдоэлементов Tailwind CSS. Мы воспользуемся псевдоклассом After из Tailwind для создания анимации конического градиента, которая вращается вокруг поля ввода, создавая иллюзию падающей звезды, обводящей границу.

Настройка HTML и Tailwind CSS

Ниже представлена ​​структура HTML и классы CSS Tailwind, необходимые для создания этого эффекта:

Разбираем код

Настройка контейнера

  





Мы начинаем с создания гибкого контейнера, который центрирует контент как по вертикали, так и по горизонтали с помощью h-screen (полная высота) и bg-black (черный фон).

  
  
  Обертка для поля ввода




  





Поле ввода заключено в элемент div с параметром z-10, чтобы гарантировать, что оно находится над анимированной границей, m-auto, чтобы центрировать его внутри гибкого контейнера, и скрытым переполнением, чтобы содержать анимированную границу внутри своих границ.

  
  
  Поле ввода с анимированной рамкой




  





Главное поле ввода имеет фиксированную ширину 500 пикселей и высоту 14 единиц попутного ветра.
Класс border-white/50 добавляет полупрозрачную рамку, а rounded-md придает ей закругленные углы.

bg-black устанавливает черный цвет фона, смешивая его с контейнером.

  
  
  Создание анимации




  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">




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

after:-inset-[1px] слегка расширяет градиент за пределы границы ввода, а after:absolute позиционирует его абсолютно так, чтобы покрыть всю область ввода.

after:animate-[spin_4s_infinite] добавляет пользовательскую анимацию вращения, которая совершает один полный оборот каждые 4 секунды.
after:bg-[conic-gradient...] создает эффект градиента. Мы используем классы from-transparent и to-blue-600 для определения точек цвета, создавая эффект затухания, имитирующий падающую звезду.

  
  
  Оформление поля ввода




  



Ввод сам по себе прозрачен (bg-transparent) и занимает всю высоту и ширину родительского элемента.
Класс text-lg изменяет размер текста, а text-white и Placeholder:text-white/40 гарантируют, что текст и заполнитель будут видны на темном фоне.
Наконец, focus:outline-none удаляет контур фокуса по умолчанию, чтобы сохранить собственный стиль.

  
  
  Заключение


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

Удачного программирования!

Фото на обложке: Juskteez Vu на Unsplash