在网页上找了半天大佬的鼠标特效，基本上都是烟花特效，爆炸特效，没有找到自己满意的，于是自己用ai跑了一个，本博客使用的鼠标特效就是下文所介绍的

创建鼠标特效 CSS 文件

在 /source/css/ 目录下创建 mouse-effect.css，如果没有这个文件夹就自己创建一个，粘贴以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/* 鼠标点击水波纹特效 */
.click-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: ripple 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
    border: 2px solid rgba(64, 158, 255, 0.8);
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
  }
  20% {
    opacity: 0.6;
    border: 2px solid rgba(64, 158, 255, 0.7);
    box-shadow: 0 0 20px rgba(64, 158, 255, 0.6);
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
    border: 2px solid rgba(64, 158, 255, 0);
    box-shadow: 0 0 30px rgba(64, 158, 255, 0);
  }
}

/* 多色水波纹特效 - 可选 */
.multi-color .click-ripple {
  animation: ripple-multi 1.2s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes ripple-multi {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
    border: 2px solid rgba(64, 158, 255, 0.8);
    box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
  }
  33% {
    opacity: 0.6;
    border: 2px solid rgba(103, 194, 58, 0.7);
    box-shadow: 0 0 20px rgba(103, 194, 58, 0.6);
  }
  66% {
    opacity: 0.4;
    border: 2px solid rgba(230, 162, 60, 0.6);
    box-shadow: 0 0 25px rgba(230, 162, 60, 0.5);
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
    border: 2px solid rgba(245, 108, 108, 0);
    box-shadow: 0 0 30px rgba(245, 108, 108, 0);
  }
}

/* 鼠标移动轨迹效果 - 可选 */
.mouse-trail {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  background: rgba(64, 158, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: trail 0.6s ease-out forwards;
}

@keyframes trail {
  0% {
    width: 12px;
    height: 12px;
    opacity: 0.8;
  }
  100% {
    width: 0;
    height: 0;
    opacity: 0;
  }
}

/* 禁用特效类 */
.no-mouse-effect .click-ripple,
.no-mouse-effect .mouse-trail {
  display: none !important;
}

创建鼠标特效 JavaScript 文件

在 /source/js/ 目录下创建 mouse-effect.js，同上，如果没有 js 目录，请先创建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
// 鼠标点击水波纹特效
(function() {
  // 配置参数
  const config = {
    rippleColor: '#409EFF',  // 水波纹主色（蓝色）
    enableMultiColor: false,  // 是否启用多色效果
    enableTrail: true,        // 是否启用鼠标移动轨迹
    maxRipples: 5,            // 同时显示的最大波纹数量
    trailColor: '#409EFF',    // 轨迹颜色
    trailSize: 12,            // 轨迹大小
    trailDuration: 600,       // 轨迹持续时间（ms）
    enableSound: false,       // 是否启用音效（需要音效文件）
    soundVolume: 0.1,         // 音效音量
    disableOnMobile: true     // 在移动设备上禁用
  };
  
  // 检测移动设备
  function isMobileDevice() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  }
  
  // 移动设备上禁用
  if (config.disableOnMobile && isMobileDevice()) {
    return;
  }
  
  // 创建样式元素
  const style = document.createElement('style');
  style.textContent = `
    .click-ripple {
      border-color: ${config.rippleColor} !important;
      box-shadow: 0 0 10px ${config.rippleColor} !important;
    }
    .mouse-trail {
      background: ${config.trailColor} !important;
    }
  `;
  document.head.appendChild(style);
  
  // 存储波纹元素
  let ripples = [];
  let trails = [];
  
  // 鼠标点击事件
  document.addEventListener('click', function(e) {
    // 限制同时显示的波纹数量
    if (ripples.length >= config.maxRipples) {
      const oldRipple = ripples.shift();
      if (oldRipple && oldRipple.parentNode) {
        oldRipple.parentNode.removeChild(oldRipple);
      }
    }
    
    // 创建波纹元素
    const ripple = document.createElement('div');
    ripple.className = 'click-ripple';
    if (config.enableMultiColor) {
      ripple.classList.add('multi-color');
    }
    
    // 设置位置
    ripple.style.left = e.clientX + 'px';
    ripple.style.top = e.clientY + 'px';
    
    // 添加到页面
    document.body.appendChild(ripple);
    ripples.push(ripple);
    
    // 播放音效（可选）
    if (config.enableSound) {
      playClickSound();
    }
    
    // 动画结束后移除元素
    setTimeout(() => {
      if (ripple.parentNode) {
        ripple.parentNode.removeChild(ripple);
        ripples = ripples.filter(r => r !== ripple);
      }
    }, 1200);
  });
  
  // 鼠标移动轨迹效果
  if (config.enableTrail) {
    let lastTime = 0;
    const trailInterval = 50; // 轨迹间隔（ms）
    
    document.addEventListener('mousemove', function(e) {
      const currentTime = Date.now();
      
      // 限制轨迹生成频率
      if (currentTime - lastTime < trailInterval) {
        return;
      }
      lastTime = currentTime;
      
      // 限制同时显示的轨迹数量
      if (trails.length >= 8) {
        const oldTrail = trails.shift();
        if (oldTrail && oldTrail.parentNode) {
          oldTrail.parentNode.removeChild(oldTrail);
        }
      }
      
      // 创建轨迹元素
      const trail = document.createElement('div');
      trail.className = 'mouse-trail';
      trail.style.left = e.clientX + 'px';
      trail.style.top = e.clientY + 'px';
      trail.style.width = config.trailSize + 'px';
      trail.style.height = config.trailSize + 'px';
      
      // 添加到页面
      document.body.appendChild(trail);
      trails.push(trail);
      
      // 动画结束后移除元素
      setTimeout(() => {
        if (trail.parentNode) {
          trail.parentNode.removeChild(trail);
          trails = trails.filter(t => t !== trail);
        }
      }, config.trailDuration);
    });
  }
  
  // 播放点击音效（可选）
  function playClickSound() {
    try {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();
      
      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);
      
      oscillator.frequency.value = 523.25; // C5 音符
      oscillator.type = 'sine';
      
      gainNode.gain.setValueAtTime(0, audioContext.currentTime);
      gainNode.gain.linearRampToValueAtTime(config.soundVolume, audioContext.currentTime + 0.01);
      gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.2);
      
      oscillator.start(audioContext.currentTime);
      oscillator.stop(audioContext.currentTime + 0.2);
    } catch (e) {
      console.log('音效播放失败:', e);
    }
  }
  
  // 添加控制台提示
  console.log('%c✨ 鼠标特效已加载 ✨', 'color: #409EFF; font-size: 14px; font-weight: bold;');
  console.log('%c📱 移动设备支持: ' + (!config.disableOnMobile || !isMobileDevice()), 'color: #67C23A;');
  
  // 添加到全局对象以便调试
  window.mouseEffect = {
    config: config,
    disable: function() {
      document.body.classList.add('no-mouse-effect');
      console.log('鼠标特效已禁用');
    },
    enable: function() {
      document.body.classList.remove('no-mouse-effect');
      console.log('鼠标特效已启用');
    },
    changeColor: function(color) {
      config.rippleColor = color;
      style.textContent = style.textContent.replace(/#[0-9a-fA-F]{6}/g, color);
      console.log('水波纹颜色已更改为: ' + color);
    }
  };
})();

创建配置文件（可选）

在 /source/_data/ 目录下创建 mouse-effect.yml（如果没有 _data 目录，请先创建）：

1
2
3
4
5
6
7
8
# 鼠标特效配置
enable: true
ripple_color: '#409EFF'  # 水波纹颜色
enable_multi_color: false # 多色效果
enable_trail: true        # 鼠标轨迹
trail_color: '#409EFF'    # 轨迹颜色
trail_size: 12            # 轨迹大小
disable_on_mobile: true   # 移动端禁用

修改主题配置文件

在 _config.butterfly.yml 中添加以下配置：

1
2
3
4
5
inject: 
  head:
    - <link rel="stylesheet" href="/css/mouse-effect.css">
  bottom:
    - <script src="/js/mouse-effect.js"></script>

然后使用hexo三件套部署即可

自定义调整

你可以通过修改配置来调整效果：

  • 修改颜色：在 CSS 中修改 rgba(64, 158, 255, 0.8) 的颜色值

  • 调整大小：修改 CSS 中 width 和 height 的最终值

  • 调整速度：修改 animation-duration 的值

  • 禁用特效：在浏览器控制台中输入 mouseEffect.disable()

这个特效会在鼠标点击时产生蓝色的水波纹扩散效果，逐渐消失。如果你想要更丰富的效果，可以启用多色模式或鼠标轨迹效果。