Недавно у меняСайт ГровераЯ обнаружил, что с забавной анимацией при наведении курсора я также получил некоторое собственное вдохновение. Анимация заключается в перемещении мыши над кнопкой подписки, и перемещение курсора отобразит соответствующий цветной градиент. Идея проста, но она выделяет кнопку, и люди сразу ее замечают, увеличивая вероятность нажатия.
Как мы можем добиться этого эффекта и сделать наш сайт выделяющимся? На самом деле, это не так сложно, как вы думаете!
отслеживать местоположение
Первое, что нам нужно сделать, это получить положение мыши.
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`)
}
- выделить элемент, дождаться, пока пользователь наведет на него мышку;
- Вычислить положение относительно элемента;
- Сохраните координаты в переменных CSS.
Да, всего 9 строк кода позволяют узнать, куда пользователь поместил мышь, и с помощью этой информации вы можете добиться неожиданных результатов, но давайте сначала закончим часть кода с CSS.
анимированный градиент
Мы начинаем с сохранения координат в переменных CSS, чтобы мы могли использовать их в любое время.
.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;
}
}
- использовать
span
Оберните текст, чтобы он не отображался над кнопкой. - будет
width
иheight
инициализирован как0px
, когда пользователь наводит курсор на кнопку, измените его на400px
. Не забудьте установить этот переход, чтобы он выглядел как ветер 💨 в одно мгновение; - Используйте координаты для отслеживания положения мыши;
- существует
background
применить к свойствамradial-gradient
, используя ближайшую окружность. Ближайшая сторона может покрывать все лицо.
результат
Это сработало! Добавьте его на свою HTML-страницу, и ваша крутая кнопка готова к использованию!
другие попытки
Этого потрясающего эффекта можно добиться, собирая положение мыши и реагируя соответствующим образом. Круто, я получил массу удовольствия от этого практического процесса 👌
Это то, что я звонюbasicScrollДругие подобные анимации, сделанные сайтом:
Он более навороченный, и сделана кнопка с 3D-эффектом:
Возможности безграничны. Дайте нам знать, что вы сделали с ним в комментариях ниже.
вопросы и ответы
зачем использоватьwidth
иheight
заменятьtransform: scale()
Для создания анимационных эффектов?
регулируяwidth
иheight
значение для достижения эффекта анимации, на практике производительность очень низкая, вы должны попробовать использоватьtransform
достигать. Так почему я все еще держусь? Причина этого в том, что когда браузер отображает элементы в ускоренном слое (т. е. переходы), если кнопка имеет непрямоугольные края, слой может иметь неожиданные ошибки.
Редактор сказал следующее:Правда способов применения многоtransform
, но некоторым браузерам это не нравится. Потерпеть поражениеtransform
Реализовать функцию преобразования может быть хорошим решением проблемы. Существует такжеСпособы исправить Safariсайт может решить эту проблему.
зачем менятьtop
иleft
стоимость имущества без использованияtransform: translate()
?
Смотрите объяснение выше 👆
Могу я подписаться на вас в Твиттере?
Конечно можешь~.