给Blog添加复古的鼠标样式

在漫无目的 Vol. 25 里，我曾经推荐过一个开源项目，它提供了一些复古的鼠标样式，可以通过 JS 的方式引用到自己的 Web 项目当中。比如，我的 Blog 就使用了这个里面的彩虹特效。在这里可以预览所有的鼠标样式，挑一个你喜欢就好。

使用起来很简单，根据自己的项目来选择即可。我这里直接用 JS 的引用方式，在 Ghost 后台添加到了 Header 里就可以了。

JS 方式

引入 js，或者放到 cdn 里进行托管 JS，加快访问速度

<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>

增加一个 load 的监听事件，载入对应样式的鼠标样式

window.addEventListener('load', (event) => {
  // 更改为自己喜欢的鼠标样式
  new cursoreffects.rainbowCursor();
  // 也可以根据文档自定义鼠标样式
  // new cursoreffects.rainbowCursor({length: 3, colors: ['red', 'blue'], size: 4});
});

NPM 方式

安装包 npm install cursor-effects
在项目中引用

import { emojiCursor } from 'cursor-effects';

new emojiCursor({ emoji: ["🔥", "🐬", "🦆", "🌤"] });

看到这些复古的鼠标特效，让我想到零几年，QQ 空间里曾经一度风行的自定义鼠标挂件，那个时候的互联网至少很有趣。