[Перевод] Переменные CSS для достижения классного эффекта наведения мыши

CSS
[Перевод] Переменные CSS для достижения классного эффекта наведения мыши

оригинал:Stunning hover effects with CSS variables

мой блог:[Перевод] Переменные CSS для достижения классного эффекта наведения мыши

я недавноСайт ГровераИнтересно наведите анимацию на вдохновение. Переместите кнопку мыши, чтобы отобразить подписку после градации цвета курсора. Идея простая, а результат - выделиться из кнопки сброса и ждать щелчков.

效果图

Так как же добиться подобного эффекта, чтобы наш сайт был одинаково хорош? Отлично, это не так сложно, как вы думаете!

отслеживать местоположение

Первое, что нам нужно сделать, это отследить положение курсора мыши.

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
}
  1. Выберите целевой элемент и прослушайте пользовательские события наведения мыши.
  2. Вычислить координаты мыши относительно элемента
  3. Сохранение координат в переменные CSS

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

Анимация градиента

Мы сохранили координаты мыши в переменных CSS, поэтому их можно использовать в любом месте CSS. (нижеSCSSкод)

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;

  span {
    position: relative;
  }

  &::before {
    --size: 0;
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }

  &:hover::before {
    --size: 400px;
  }
}
  1. обернуть текст вspan, чтобы градиентный слой не накладывался на текст
  2. исходныйwidthа такжеheightдля0pxи увеличьте их, когда мышь находится над кнопкой400px. не забудьте установитьtransitionпридать ему эффект затухания
  3. Используйте JS, чтобы установить координаты, чтобы следовать за мышью
  4. применить одинradial-gradientприбытьbackgroundна и использоватьclosest-side circle.closest-sideсделатьbackgroundзаполнить весьbeforeНо не дальше.

Эффект

Вот и все, добавление отсутствующего HTML делает свое дело:

<button class="button">
	<span>Hover me I'm awesome</span>
</button>

онлайн предварительный просмотр

See the Pen Mouse movement button with border-radius by Tobias Reich (@electerious) on CodePen.

расширять

Так много эффектов можно создать, просто реагируя на положение мыши. Это великолепно и делает 👌взаимодействие таким веселым.

Вот кто яbasicScrollАналогичная анимация используется на веб-сайте:

May the hover be with you https://t.co/2jrmVorLRW

—@electerious

Или придумайте и создайте 3D-кнопку параллакса:

3D-кнопка параллакса с переменными CSS, управляемыми JS @CodePen 🎉 https://t.co/qE0woiNip8 https://t.co/Wyi0xjRzPq

炫酷3d效果

—@electerious

Возможности безграничны. Вы можете поделиться эффектами, которые вы создали с его помощью, в разделе комментариев ниже👇.

Q&A

В: Зачем использоватьwidthа такжеheightВместо того, чтобы использоватьtransform: scale()Анимировать это?

A: Для производительности анимации,widthа такжеheightплохо, вы можете попробовать использоватьtransform. Почему бы мне не сделать это? Проблема в том, что браузер рендерит элемент (трансформирует) в ускоренном слое. Этот слой может вызывать проблемы, когда кнопки имеют непрямоугольные края.

Issue with accelerated layers and border-radius

В: Зачем менятьtopа такжеleftвместоtransform: translate()Шерстяная ткань?

О: Обратитесь к предыдущей статье.

В: Могу ли я следить за вами в Твиттере?

О: Конечно. (Оригинальный автор Twitter @electerious)

Категории