有趣的鼠标指针交互探索_0

时间：2023-03-21 14:59:18 科技观察

今天，实现这样一个有趣的交互效果：将原来的鼠标指针样式修改成自己想要的效果，并添加一些特殊的交互效果。修改鼠标样式首先第一个问题，我们可以看到在上图中，鼠标指针的样式被修改成了一个点：正常来说，应该是这样的：当然，这个比较简单。在CSS中，我们可以通过光标样式来修改鼠标指针的形状。使用光标修改鼠标样式。cursorCSS[1]属性设置鼠标指针的类型，当鼠标指针悬停在元素上时显示相应的样式。cursor:auto;cursor:pointer;...cursor:zoom-out;/*使用图片*/cursor:url(hand.cur)/*使用图片，并设置fallbackpocket*/cursor:url(hand.cur),指针;这一点大家应该都清楚。一般来说，在不同的场景下，选择不同的鼠标指针样式也是一种提升用户体验的手段。当然，在这个交互中，我们不想将光标设置成任何样式，相反，我们需要将其隐藏。通过cursor:none隐藏光标这里我们通过cursor:none:{cursor:none;}隐藏页面上的鼠标指针这样，页面上的鼠标指针消失：通过全局事件监听，模拟鼠标指针消失，我们简单地模拟一个鼠标指针。我们先实现一个10pxx10px的圆形div，设置为基于的绝对定位：

#g-pointer{position:absolute;顶部：0；左：0；宽度：10px；高度：10px；背景：#000；border-radius:50%;}然后，在页面上，我们得到一个圆形的黑点：然后通过事件监听，监听body上的mousemove，小圆圈的位置与实时鼠标指针位置重合：constelement=document.getElementById("g-pointer");constbody=document.querySelector("body");functionsetPosition(x,y){元素。style.transform=`translate(${x}px,${y}px)`;}body.addEventListener('mousemove',(e)=>{window.requestAnimationFrame(function(){setPosition(e.clientX-5,e.clientY-5);});});这样如果不设置cursor:none，就会有这样的效果：在body中加上cursor:none，相当于模拟一个鼠标指针：在此基础上，由于当前鼠标指针其实是一个div，我们可以给它添加任何交互效果。以文章开头的例子为例，我们只需要使用混合模式mix-blend-mode:exclusion就可以实现模拟鼠标指针在不同背景色下智能变色。如果你对混合模式的技巧还有疑惑，可以看看我的文章：使用混合模式让文本智能适应背景色[2]。完整的代码：

Loremipsumdolorsitamet

body{游标：无；背景颜色：#fff;}#g-pointer-1,#g-pointer-2{位置：绝对；顶部：0；左：0；宽度：12px；高度：12px；背景：#999；边界半径：50%；背景色：#fff；混合混合模式：排除；z-index:1;}#g-pointer-2{宽度:42px;高度：42px；背景：#222；过渡：.2s缓出；}constbody=document.querySelector("body");constelement=document.getElementById("g-pointer-1");constelement2=document.getElementById("g-pointer-2");consthalfAlementWidth=element.offsetWidth/2;consthalfAlementWidth2=element2.offsetWidth/2;functionsetPosition(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);});});我们可以完美还原标题图的效果：完整代码，可以点这里：MouseCursorTransition[3]mousefollow不仅如此，当然这里的核心是一个鼠标跟随动画，withcursor:none。此外，对于鼠标跟随，我们不一定要使用JavaScript。我在不可思议的纯CSS实现鼠标跟随[4]中介绍了一个纯CSS实现的鼠标跟随效果。如果你有兴趣，也可以看看。基于纯CSS鼠标跟随，配合cursor:none，还可以制作一些有趣的动画效果。像这样：CodePen演示——取消转换和光标无[5]。最后，本文到此结束，一个小技巧，希望对你有所帮助：）参考资料[1]CSS：https://developer.mozilla.org/zh-CN/docs/Web/CSS。[2]使用混合模式让文本智能适应背景颜色：https://github.com/chokcoco/iCSS/issues/169。[3]鼠标光标过渡：https://codepen.io/Chokcoco/pen/rNJQXXV。[4]令人难以置信的鼠标以下纯CSS实现：https://github.com/chokcoco/iCSS/issues/46。[5]CodePen演示——取消过渡和光标无：https://codepen.io/Chokcoco/pen/gOvZoVv。