建站
咨询
售后
建站咨询
这篇文章主要介绍了CSS鼠标指针交互效果怎么实现的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇CSS鼠标指针交互效果怎么实现文章都会有所收获，下面我们一起来看看吧。
站在用户的角度思考问题，与客户深入沟通，找到昌邑网站设计与昌邑网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、主机域名、网页空间、企业邮箱。业务覆盖昌邑地区。
修改鼠标样式
首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：
正常而言应该是这样：
当然，这里比较简单，在 CSS 中，我们可以通过 cursor 样式，对鼠标指针形状进行修改。
利用 cursor 修改鼠标样式
cursor CSS 属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。
cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用图片 */ cursor: url(hand.cur) /* 使用图片，并且设置 fallback 兜底 */ cursor: url(hand.cur), pointer;
这个大家应该都清楚，通常而言，在不同场景下，选择不同鼠标指针样式，也是一种提升用户体验的手段。
当然，在本交互中，我们并非要将 cursor 光标设置成任一样式，刚好相反，我们需要将他隐藏。
通过 cursor: none 隐藏光标
在这里，我们通过 cursor: none 隐藏页面的鼠标指针：
{
cursor: none;
}如此一来，页面上的鼠标指针就消失了：
通过全局事件监听，模拟鼠标指针
既然，消失了，我们就简单模拟一个鼠标指针。
我们首先实现一个 10px x 10px 的圆形 div，设置为基于 绝对定位：
#g-pointer {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}那么，在页面上，我们就得到了一个圆形黑点：
接着，通过事件监听，监听 body 上的 mousemove，将小圆形的位置与实时鼠标指针位置重合：
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);
});
});这样，如果不设置 cursor: none，将会是这样一个效果：
再给 body 加上 cursor: none，就相当于模拟了一个鼠标指针：
在这个基础上，由于现在的鼠标指针，实际上是个 div，因此我们可以给它加上任意的交互效果。
以文章一开头的例子为例，我们只需要借助混合模式 mix-blend-mode: exclusion，就能够实现让模拟的鼠标指针能够智能地在不同背景色下改变自己的颜色。
完整的代码：
Lorem ipsum dolor sit amet
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 halfAlementWidth3 = element2.offsetWidth / 2;
function setPosition(x, y) {
element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;
element2.style.transform = `translate(${x - halfAlementWidth3}px, ${y - halfAlementWidth3}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
setPosition(e.clientX, e.clientY);
});
});我们就能完美还原出题图的效果：
伪类事件触发
有一点需要注意的是，利用模拟的鼠标指针去 Hover元素，Click元素的时候，会发现这些事件都无法触发。
这是由于，此时被隐藏的指针下面，其实悬浮的我们模拟鼠标指针，因此，所有的 Hover、Click 事件都触发在了这个元素之上。
当然，这个也非常好解决，我们只需要给模拟指针的元素，添加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：
{
pointer-events: none;
}关于“CSS鼠标指针交互效果怎么实现”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS鼠标指针交互效果怎么实现”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。
本文名称：CSS鼠标指针交互效果怎么实现
转载源于：http://scpingwu.com/article/iihjgh.html
