Это 22-й день моего участия в ноябрьском испытании обновлений.Подробности о событии:Вызов последнего обновления 2021 г.
Всем привет, я Пинеллиа 👴, программист скульптур из песка, который только начал писать.Если вам понравилась моя статья, вы можете подписаться ➕ Нравится 👍 Подпишитесь на официальный аккаунт:передний конец пинеллии, Узнайте больше о интерфейсных знаниях!нажми на меняИсследуйте новые миры!
предисловие
Ранее я уже писал две статьи о переменных CSS.Переменные в CSS"а также"Переменная CSS с типом и значением по умолчанию", были введены от базовых до продвинутых знаний, но практика все еще относительно невелика, и все последние статьи связаны с градиентом, поэтому можно ли их объединить, потому что браузер (часть) поддерживает прямую модификацию переменных , мне просто нужно найти положение градиента в позиции мыши в режиме реального времени, это просто! ! !
Предварительное знание
1. CSSStyleDeclaration.setProperty()
CSSStyleDeclaration.setProperty() предоставляет возможность напрямую изменять значения свойств CSS. Конечно, он также поддерживает изменение переменных в CSS.
:root {
--color: red;
}
div {
color: var(--color);
}
<div>div</div>
Цвет шрифта в это время красный, выполните document.body.style.setProperty('--color', 'blue'); цвет шрифта станет синим.
2. mousemove
mousemove прослушивает движение мыши над элементом.
addEventListener('mousedown')
3.getBoundingClientRect
getBoundingClientRect используется для получения размера текущего элемента и его положения относительно области просмотра.
создать раздел
При наведении мыши на этот div появится градиент.
<div id="container"></div>
Определите стиль: установите ширину и высоту и определите две переменные --x и --y. Здесь установите переполнение: скрыто, должно быть установлено!
#container {
width: 100px;
height: 100px;
background-color: #202344;
position: relative;
--x: 0px;
--y: 0px;
overflow: hidden;
}
Создание градиентов
Поскольку он должен следовать за градиентом мыши, требуется определение второго элемента. Здесь вы можете выбрать дочерние элементы div или псевдоэлементы. Здесь из соображений производительности я использую псевдоэлементы.
#container:before {
content: "";
position: absolute;
left: var(--x);
top: var(--y);
width: 0;
height: 0;
background: radial-gradient(circle closest-side, pink, transparent);
transform: translate(-50%, -50%);
}
Исходное состояние left: 0, top: 0, а ширина и высота равны 0. Преобразование: translate(-50%, -50%); устанавливается здесь так, чтобы мышь находилась в центре псевдоэлемента.
Когда мышь начнет перемещаться по контейнеру, установите ширину и высоту псевдоэлемента: заданные ширина и высота больше, чем контейнер, поэтому он выглядит как градиент контейнера.
#container:hover:before {
width: 200px;
height: 200px;
}
Реализовать идеи
В приведенном выше псевдоэлементе мы установили переменные left и top для использования, поэтому, пока используется событие mouseover, положение мыши получается в реальном времени, а затем две переменные --x и --y изменяются. .
let container = document.getElementById("container");
container.addEventListener("mousemove", (e) => {
console.log("鼠标在动");
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
container.style.setProperty("--x", x + "px");
container.style.setProperty("--y", y + "px");
});
Эффект:
Отсканируйте код, чтобы отправить книгу
Лично я считаю, что узел необходимо изучить. Так что на этот раз я отправлю книгу по узлам: «Руководство по началу работы с Node.js». Автор Си Минюэ, эксперт сообщества Alibaba Cloud, обозреватель GitChat, участник и промоутер сообщества открытого исходного кода, а также участвовавший в разработке многих проектов с открытым исходным кодом.Эта книга разделена на 10 глав и объясняет основы узла, включая файлы. , сетевые базы данных и т.д. Подождите. При этом также есть практика, внедряющая проект разделения фронтенда и бэкенда Express.js +vue,
Jingdong самоуправляемыйссылка на покупку