给Blog添加复古的鼠标样式

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

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

JS 方式

  1. 引入 js,或者放到 cdn 里进行托管 JS,加快访问速度
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
  1. 增加一个 load 的监听事件,载入对应样式的鼠标样式
window.addEventListener('load', (event) => {
  // 更改为自己喜欢的鼠标样式
  new cursoreffects.rainbowCursor();
  // 也可以根据文档自定义鼠标样式
  // new cursoreffects.rainbowCursor({length: 3, colors: ['red', 'blue'], size: 4});
});

NPM 方式

  1. 安装包 npm install cursor-effects
  2. 在项目中引用
import { emojiCursor } from 'cursor-effects';

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

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