Today, let's implement such an interesting interactive effect:
Modify the original mouse pointer style to the effect you want, and add some special interactive effects.
Modify mouse style
First of all, the first question, we can see that in the above picture, the style of the mouse pointer has been modified into a dot:
Normally it should look like this:
Of course, this is relatively simple. In CSS, we can modify the shape of the mouse pointer through the cursor style.
Use cursor to modify the mouse style
The cursor CSS property sets the type of the mouse pointer to display when the mouse pointer hovers over the element.
cursor: auto;
cursor: pointer;
...
cursor: zoom-out;
/* 使用图片 */
cursor: url(hand.cur)
/* 使用图片，并且设置 fallback 兜底 */
cursor: url(hand.cur), pointer;Everyone should be aware of this. Generally speaking, in different scenarios, choosing different mouse pointer styles is also a means to improve the user experience.
Of course, in this interaction, we don't want to set the cursor cursor to any style, on the contrary, we need to hide it .
Hide the cursor via cursor: none
Here, we hide the mouse pointer of the page by cursor: none :
{
cursor: none;
}As a result, the mouse pointer on the page disappears:
Simulate the mouse pointer by listening to global events
Now that it's gone, we simply simulate a mouse pointer.
We first implement a circular div of 10px x 10px and set it to absolute positioning based on <body> :
<div id="g-pointer"></div> #g-pointer {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}Then, on the page, we get a circular black dot:
Then, through event monitoring, monitor the mousemove on the body, and coincide the position of the small circle with the real-time mouse pointer position:
const element = document.getElementById("g-pointer");
const body = document.querySelector("body");
function setPosition(x, y) {
element.style.transform = `translate(${x}px, ${y}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
setPosition(e.clientX - 5, e.clientY - 5);
});
}); In this way, if you don't set cursor: none , it will be like this:
Add cursor: none to the body, which is equivalent to simulating a mouse pointer:
On this basis, since the current mouse pointer is actually a div , so we can add arbitrary interactive effects to it .
Taking the example at the beginning of the article as an example, we only need to use the blending mode mix-blend-mode: exclusion to make the simulated mouse pointer intelligently change its color under different background colors.
If you still have doubts about this technique of blending mode, you can take a look at this article of mine: Using blending mode, let the text intelligently adapt to the background color
Complete code:
<p>Lorem ipsum dolor sit amet</p>
<div id="g-pointer-1"></div>
<div id="g-pointer-2"></div> body {
cursor: none;
background-color: #fff;
}
#g-pointer-1,
#g-pointer-2
{
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
background: #999;
border-radius: 50%;
background-color: #fff;
mix-blend-mode: exclusion;
z-index: 1;
}
#g-pointer-2 {
width: 42px;
height: 42px;
background: #222;
transition: .2s ease-out;
} const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;
function setPosition(x, y) {
element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`; element2.style.transform = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
setPosition(e.clientX, e.clientY);
});
});We can perfectly restore the effect of the title map:
The complete code, you can click here: Mouse Cursor Transition
Pseudo event trigger
One thing to note is that when you use the simulated mouse pointer to Hover and Click elements, you will find that these events cannot be triggered.
This is because, under the hidden pointer at this time, we simulate the mouse pointer floating, so all Hover and Click events are triggered on this element.
Of course, this is also very easy to solve. We only need to add pointer-events: none to the element that simulates the pointer to prevent the default mouse event and let the event pass through:
{
pointer-events: none;
}The mouse follows, not only that
Of course, the core here is a mouse following animation, with cursor: none .
Also, with mouse following, we don't necessarily have to use JavaScript.
I introduced a pure CSS-implemented mouse-following effect in the article, the incredible pure CSS implementation of mouse following. If you are interested, you can also take a look.
Based on pure CSS mouse following, with cursor: none , you can also create some interesting animation effects. Like this:
CodePen Demo -- Cancle transition & cursor none
at last
This concludes this article, I hope it helps you :)
If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄
More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.
If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。