前端js更改鼠标箭头为动态ani效果

嘉的博客

已于 2024-01-28 16:37:25 修改

阅读量594

点赞数 7

分类专栏： javascript html web 文章标签： javascript js

于 2024-01-28 16:35:50 首次发布

本文链接：https://blog.csdn.net/heikerx/article/details/135897077

版权

web 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

javascript

5 篇文章 0 订阅

订阅专栏

改变鼠标样式

2023, 12.22
可以改变默认的鼠标样式，比如说把白色箭头改为游戏里的图标。在windows里可以直接在设置里改。在前端网页上可以使用.cur静态图标，也可以使用.ani动态鼠标。

前言

在windows上改鼠标样式很简单，打开设置，搜索鼠标设定直接改。支持静态和动态鼠标样式。在前端页面上也可以用炫酷的鼠标箭头效果。

一.更改网页上的静态鼠标样式.cur

css支持更改静态鼠标样式.cur图标，可以在CSS文件里直接加上.

* {
       cursor: url("./path/mouse.cur"), default;
   }

上面这行代码表示用mouse.cur作为鼠标，如果有问题则使用default默认鼠标。

二.使用动态鼠标样式.ani文件

css不支持动态鼠标样式.ani图标，在网上找到一个库支持.ani,感谢国外大神提供的库。
原文点这里
首先安装依赖 ani-cursor

npm install ani-cursor

下面是完整代码的一个实例:
index.html

<!DOCTYPE html>
<html>
<head>
    <title>ani-cursor example</title>
    <meta charset="UTF-8" />
    <style>
        #demo {
            width: 300px;
            height: 300px;
            border: 4px dashed black;
            background: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
        <script src="./src/index.js"></script>
</body>
</html>

./src/index.js文件

import { convertAniBinaryToCSS } from "ani-cursor";
async function applyCursor(selector, aniUrl) {
    const response = await fetch(aniUrl);
    const data = new Uint8Array(await response.arrayBuffer());
    console.log(data)
    const style = document.createElement("style");
    style.innerText = convertAniBinaryToCSS(selector, data);

    document.head.appendChild(style);
}

applyCursor(
    "#demo",
    // "https://archive.org/cors/tucows_169750_Dove_Flying/dove.ani"
    "https://plusw.github.io/blog_/public/source/1.ani"
);

项目要启动web服务运行。可以使用Parcel启动服务，也可以用vite等等
这里推荐一个下载.cur和.ani的网站

嘉的博客

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端js更改鼠标箭头为动态ani效果

改变鼠标样式2023, 12.22可以改变默认的鼠标样式，比如说把白色箭头改为游戏里的图标。在windows里可以直接在设置里改。在前端网页上可以使用.cur静态图标，也可以使用.ani动态鼠标。前言在windows上改鼠标样式很简单，打开设置，搜索鼠标设定直接改。支持静态和动态鼠标样式。在前端页面上也可以用炫酷的鼠标箭头效果。一.更改网页上的静态鼠标样式.curcss支持更改静态鼠标样式.cur图标，可以在CSS文件里直接加上.* { cursor: url("./path/m
复制链接

扫一扫