在网站使用ani文件的动态鼠标指针

清蒸QB

已于 2024-12-28 19:53:34 修改

阅读量1k

点赞数 13

文章标签： javascript 前端鼠标开源

于 2024-10-22 21:56:11 首次发布

本文链接：https://blog.csdn.net/weixin_73200542/article/details/143169096

版权

之前就想给自己的博客网站加上一个动态的鼠标指针，B站上也有很多好看的ani动态鼠标指针文件，可惜目前CSS是不支持直接使用ani文件的，找了一下有一个ani-cursor的库，但只能用一些非常老的ani文件，而且不会调整指针大小，直接用原始图标大小，导致有一些指针很大先不说，甚至大到不能显示。然后研究了一下这个库的实现动态指针的原理，感觉不难就自己写了个库。

如何使用

库已通过npm发布，直接npm安装：

npm install ani-cursor.js

使用也很简单：

import { setANICursor } from 'ani-cursor.js';
setANICursor("body", "/your/ani/file/url.ani");

两个参数分别是要应用样式的CSS选择器和ani文件URL，你也可以将body改为类选择器或其他东西。

还有一个多个选择器元素同时应用一个ani动态指针效果的函数，接受一个CSS选择器字符串数组：

import { setANICursorWithGroupElement } from 'ani-cursor.js';
let textAbleGroup = ["input", "input[type=\"text\"]", "textarea", "span", "p", "h1", "h2", "h3", "h4", "h5", "h6"];
setANICursorWithGroupElement(textAbleGroup, "/ani/TextSelect.ani");

代码已开源至github（求个star）：qingzhengQB/ani-cursor.js: A tool that allow you to use ani files in your website to create a animation cursor. 一个能让你在网站中使用 ani 文件以创建动画鼠标指针的工具

已经在我的博客使用，效果预览：在网页中使用ani动态鼠标指针

在github写的超简陋预览：应该一直可用的预览