Когда дело доходит до повышения интерактивности и визуальной привлекательности веб-сайтов, эффекты наведения играют решающую роль. Один из популярных эффектов — заполнение элемента из центра при наведении курсора мыши. Этот эффект придает элементам динамичность и привлекательность, привлекая внимание к определенным областям страницы. В этой статье мы рассмотрим несколько методов достижения этого эффекта на примерах кода. Давайте погрузимся!

Метод 1: переход CSS и преобразование масштаба.
Один из способов добиться эффекта заливки — использовать переходы CSS и преобразования масштаба. Вот пример:

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #ff0000;
  transition: width 0.3s, height 0.3s;
}
.container:hover .box {
  width: 100%;
  height: 100%;
}

В этом методе мы создаем элемент-контейнер с фиксированной шириной и высотой. Внутри контейнера у нас есть коробка, которая изначально скрыта. При наведении мы изменяем ширину и высоту поля от 0 до 100 %, создавая эффект заливки из центра.

Метод 2: анимация пути SVG
Другой подход предполагает использование SVG (масштабируемой векторной графики) и анимацию пути элемента. Вот пример:

<svg viewBox="0 0 200 200">
  <path d="M100,100 L100,100"></path>
</svg>

svg {
  width: 200px;
  height: 200px;
}
path {
  fill: none;
  stroke: #ff0000;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.3s;
}
svg:hover path {
  stroke-dashoffset: 0;
}

В этом методе мы определяем элемент SVG с фиксированной шириной и высотой. Внутри SVG у нас есть элемент пути, который представляет фигуру, которую мы хотим заполнить. Анимируя свойство stroke-dashoffsetпри наведении курсора, мы создаем эффект заполнения из центра.

Метод 3: псевдоэлементы CSS и преобразования
Этот метод использует псевдоэлементы CSS для создания эффекта заливки. Вот пример:

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
}
.box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  background-color: #ff0000;
  transition: width 0.3s, height 0.3s;
}
.container:hover .box::before {
  width: 100%;
  height: 100%;
}

В этом методе мы создаем элемент-контейнер и элемент коробки внутри него. Используя псевдоэлемент ::before, мы позиционируем и оформляем скрытый элемент. При наведении мы изменяем его ширину и высоту от 0 до 100 %, создавая эффект заливки.

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