百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

有意思的鼠标指针交互探究

liuian 2025-01-11 15:10 17 浏览

今天，来实现这样一个有意思的交互效果：

将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。

修改鼠标样式

首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：

正常而言应该是这样：

当然，这里比较简单，在 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，设置为基于 <body> 绝对定位：

<div id="g-pointer"></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，就能够实现让模拟的鼠标指针能够智能地在不同背景色下改变自己的颜色。

对于混合模式这个技巧还有所疑问的，可以看看我的这篇文章：利用混合模式，让文字智能适配背景颜色

完整的代码：

<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);
  });
});

我们就能完美还原出题图的效果：

完整的代码，你可以戳这里：Mouse Cursor Transition

伪类事件触发

有一点需要注意的是，利用模拟的鼠标指针去 Hover 元素，Click 元素的时候，会发现这些事件都无法触发。

这是由于，此时被隐藏的指针下面，其实悬浮的我们模拟鼠标指针，因此，所有的 Hover、Click 事件都触发在了这个元素之上。

当然，这个也非常好解决，我们只需要给模拟指针的元素，添加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：

{
    pointer-events: none;
}

鼠标跟随，不仅于此

当然，这里核心就是一个鼠标跟随动画，配合上 cursor: none。

而且，鼠标跟随，我们不一定一定要使用 JavaScript。

我在 不可思议的纯 CSS 实现鼠标跟随 一文中，介绍了一种纯 CSS 实现的鼠标跟随效果，感兴趣的也可以看看。

基于纯 CSS 的鼠标跟随，配合 cursor: none，也可以制作出一些有意思的动画效果。像是这样：

CodePen Demo -- Cancle transition & cursor none

文章来自https://www.cnblogs.com/coco1s/p/16396016.html

相关推荐

vue怎么和后端php配合

Vue和后端PHP可以通过HTTP请求进行配合。首先，前端Vue可以使用axios库或者Vue自带的$http对象来发送HTTP请求到后端PHP接口。通过axios库发送POST、GET、PUT等请求...

Ansible最佳实践之 AWX 使用 Ansible 与 API 通信

#头条创作挑战赛#API简单介绍红帽AWX提供了一个类似Swagger的RESTful风格的Web服务框架，可以和awx直接交互。使管理员和开发人员能够在webUI之外控制其...

PHP8.3 错误处理革命:Exception 与 Error 全面升级

亲爱的小伙伴，好久没有发布信息了，最近学习了一下PHP8.3的升级，都有哪些优化和提升，把学到的分享出来给需要的小伙伴充下电。技术段位：高可用性必修目标收益：精准错误定位+异常链路追踪适配场景...

使用 mix/vega + mix/db 进行现代化的原生 PHP 开发

最近几年在javascript、golang生态中游走，发现很多npm、gomod的优点。最近回过头开发MixPHPV3，发现composer其实一直都是一个非常优秀的工具，但是...

15 个非常好用的 JSON 工具

JSON（JavaScriptObjectNotation）是一种流行的数据交换格式，已经成为许多应用程序中常用的标准。无论您是开发Web应用程序，构建API，还是处理数据，使用JSON工具可以大...

php8环境原生实现rpc

大数据分布式架构盛行时代的程序员面试，常常遇到分布式架构，RPC,本文的主角是RPC,英文名为RemoteProcedureCall，翻译过来为“远程过程调用”。主流的平台中都支持各种远程调用技术...

「PHP编程」如何搭建私有Composer包仓库?

在前一篇文章「PHP编程」如何制作自己的Composer包？中，我们已经介绍了如何制作自己的composer包，以及如何使用composer安装自己制作的composer包。不过，这其中有...

WAF-Bypass之SQL注入绕过思路总结

过WAF（针对云WAF）寻找真实IP（源站）绕过如果流量都没有经过WAF，WAF当然无法拦截攻击请求。当前多数云WAF架构，例如百度云加速、阿里云盾等，通过更改DNS解析，把流量引入WAF集群，流量经...

【推荐】一款 IDEA 必备的 JSON 处理工具插件 — Json Assistant

JsonAssistant是基于IntelliJIDEs的JSON工具插件，让JSON处理变得更轻松！主要功能完全支持JSON5JSON窗口（多选项卡）选项卡更名移动至主编辑器用...

技术分享 | 利用PHAR协议进行PHP反序列化攻击

PHAR(“PhpARchive”)是PHP中的打包文件，相当于Java中的JAR文件，在php5.3或者更高的版本中默认开启。PHAR文件缺省状态是只读的，当我们要创建一个Phar文件需要修改...

php进阶到架构之swoole系列教程(一)windows安装swoole

目录概述安装Cygwin安装swoolephp7进阶到架构师相关阅读概述这是关于php进阶到架构之swoole系列学习课程：第一节：windows安装swoole学习目标：在Windows环境将搭建s...

go 和 php 性能如何进行对比?

PHP性能很差吗？每次讲到PHP和其他语言间的性能对比，似乎都会发现这样一个声音：单纯的性能对比没有意义，主要瓶颈首先是数据库，其次是业务代码等等。好像PHP的性能真的不能单独拿出来讨论似的。但其实一...

Linux(CentOS )手动搭建LNMP(Linux+Nginx+Mysql+PHP)坏境

CentOS搭建LNMP（Linux+Nginx+Mysql+PHP）坏境由于网上各种版本新旧不一，而且Linux版本也不尽相同，所以自己写一遍根据官网的提示自己手动搭建过程。看官方文档很重要，永远...

json和jsonp区别

JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿：JSON是一种数据交换格式,而JSONP是一种非官方跨域数据交互协议。一个是描述信息的格式,一个是信息传递的约定方法。一、...

web后端正确的返回JSON

在web开发中，前端和后端发生数据交换传输现在最常见的形式就是异步ajax交互，一般返回给js都是json，如何才是正确的返回呢？前端代码想要获取JSON数据代码如下：$.get('/user-inf...

一周热门
最近发表
标签列表