This is the 22nd day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can pay attention to ➕ like 👍 pay attention to the public number: Banxia words front end, learn more front-end knowledge! Click me to explore a new world!

preface

Before written two article about CSS variable variables of CSS and the CSS with type and default value variables, from basic to advanced knowledge are introduced to, however, the practice is less, the recent articles and had something to do with the gradient, is that the two can be combined, because the browser (part) support directly modify variables, I just need to position the gradient over the mouse in real time.

Front knowledge

1. CSSStyleDeclaration.setProperty()

CSSStyleDeclaration. SetProperty () provides the ability to directly modify the CSS attribute value. You can also modify variables in the CSS.

 :root {
        --color: red;
      }
      div {
        color: var(--color);
      }
    <div>div</div>
Copy the code

The font color is red, the implementation of the document. The body. The style.css. SetProperty (‘ — color ‘, ‘blue’); The font color changes to blue.

2. mousemove

Mousemove can listen for the mouse to move over the element.

addEventListener('mousedown')
Copy the code

3.getBoundingClientRect

GetBoundingClientRect is used to get the current element’s size and position relative to the window.

Create a div

As the mouse moves over the div, a gradient appears.

    <div id="container"></div>

Copy the code

Define style: Set the width and height, and define two variables –x and –y. Here I set overflow: Hidden; It must be set!

#container {
    width: 100px;
    height: 100px;
    background-color: # 202344;
    position: relative;
    --x: 0px;
    --y: 0px;
    overflow: hidden;
}
Copy the code

Create a gradient

Since you want to follow the mouse gradient, you need the second element definition. You can select child divs or pseudo-elements. Here for performance reasons, I’m using pseudo-elements.

  #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%);
  }
Copy the code

The initial state is left:0,top:0, width and height 0. Transform: translate(-50%, -50%); Is for the mouse to be in the center of the pseudo-element.

When the mouse starts to move over the container, set the width and height of the pseudo-element: Set the width and height to be larger than the container, so that it looks like the gradient of the container.

#container:hover:before {
    width: 200px;
    height: 200px;
}
Copy the code

Implementation approach

For the above pseudo-elements, we set the left and top to use variables, so just use the mouseover event to get the mouse position in real time, and then modify the –x and –y variables.

let container = document.getElementById("container");
container.addEventListener("mousemove".(e) = > {
    console.log("Mouse moving");
    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");
});
Copy the code

Effect:

Sweep the code book

As a front-end, I personally feel Node is a must-learn. So this time send a node book: “Node.js Guide to Beginners” author is Simingyue, Ali Cloud community expert, GitChat column author, open source community participants and promoters, participated in the development of multiple open source projects, the book is divided into 10 chapters and explain the basis of Node, including files, network database and so on. Also in practice, I introduced a front and back end separation project for Express.js + Vue,

Jingdong self-purchase link