Используйте переменные CSS для достижения градиентов, которые следуют за мышью

внешний интерфейс CSS
Используйте переменные CSS для достижения градиентов, которые следуют за мышью

Это 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;
}

image-20211122215035347

Создание градиентов

Поскольку он должен следовать за градиентом мыши, требуется определение второго элемента. Здесь вы можете выбрать дочерние элементы 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;
}

image-20211122215229720

Реализовать идеи

В приведенном выше псевдоэлементе мы установили переменные 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");
});

Эффект:

渐变跟随鼠标.gif

Отсканируйте код, чтобы отправить книгу

Лично я считаю, что узел необходимо изучить. Так что на этот раз я отправлю книгу по узлам: «Руководство по началу работы с Node.js». Автор Си Минюэ, эксперт сообщества Alibaba Cloud, обозреватель GitChat, участник и промоутер сообщества открытого исходного кода, а также участвовавший в разработке многих проектов с открытым исходным кодом.Эта книга разделена на 10 глав и объясняет основы узла, включая файлы. , сетевые базы данных и т.д. Подождите. При этом также есть практика, внедряющая проект разделения фронтенда и бэкенда Express.js +vue,

Jingdong самоуправляемыйссылка на покупку

236ce5102f972c97e98e51c1f0cba87.jpg