给Hexo(next主题)博客加上stackexchange愚人节鼠标跟随特效

最新推荐文章于 2025-05-23 21:26:37 发布

原创

最新推荐文章于 2025-05-23 21:26:37 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Hexo #Next #主题美化

本文介绍了如何将Stackexchange愚人节的鼠标跟随特效应用到使用Next主题的Hexo博客上。通过修改从Github获取的代码，并将其转化为适用于Next主题的fairyDustCursor.js文件，实现博客的个性化美化。添加特效后，博客将拥有类似愚人节主题的趣味鼠标效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今年愚人节的时候stack exchange 换了一套主题如图
愚人节主题

然后就想到可以把这个特效搬到博客上面。

代码

代码来自Github，但是并不能直接用在Next主题的Hexo博客上，修改后的代码如下：
复制下来保存为fairyDustCursor.js（名字可以自己起）文件，然后参见Next主题个性化中主题美化一节的增加鼠标点击特效的方法添加鼠标跟随特效即可
效果如图:
在这里插入图片描述


/*!
 * Fairy Dust Cursor.js
 * - 90's cursors collection
 * -- https://github.com/tholman/90s-cursor-effects
 * -- http://codepen.io/tholman/full/jWmZxZ/
 */

(function fairyDustCursor() {
   
   
  
  var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {
   
   x: width/2, y: width/2};
  var particles = [];
  
  function init() {
   
   
    bindEvents();
    loop();
  }
  
  // Bind events that are needed
  function bindEvents() {
   
   
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('touchmove', onTouchMove);
    document.addEventListener('touchstart', onTouchMove);
    
    window.addEventListener('resize', onWindowResize);
  }
  
  function onWindowResize(e) {
   
   
    width = window