hexo博客增加鼠标点击效果

lemon Lv4
  2025-04-12 22:41:29 2025-04-12 22:41:29 创建   2025-04-12 22:45:40 2025-04-12 22:45:40 更新      672 字  
鼠标点击会出现5颗✨，星星会出现在点击点下方，随机排布且不重叠（直接放代码啦，在下面✨处，可以更换成你喜欢的图形）：
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
<!DOCTYPE html>
<html lang="<%= config.language %>">
<%- partial('components/header/head') %>

<!-- 在head部分结束前添加CSS样式 -->
<style>
  .star {
    position: fixed;
    pointer-events: none;
    font-size: 24px;
    animation: twinkle 1.2s ease-out forwards;
    z-index: 9999;
  }

  @keyframes twinkle {
    0% {
      opacity: 0;
      transform: translateY(0) scale(0.5);
    }
    50% {
      opacity: 1;
      transform: translateY(-40px) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(-80px) scale(1.2);
    }
  }

  /* 颜色定义 */
  .red { color: #ff4444; }
  .orange { color: #ffaa00; }
  .yellow { color: #ffff00; }
  .green { color: #00ff00; }
  .blue { color: #00aaff; }
  .purple { color: #aa00ff; }
  .pink { color: #ff00aa; }
  .cyan { color: #00ffff; }
  .lime { color: #aaff00; }
  .magenta { color: #ff00ff; }
</style>

<body>
	<%- body %>
	
	<!-- 在scripts部分结束前添加JavaScript -->
	<%- partial('components/scripts') %>
	<% if (theme.plugins.aplayer.enable) { %>
	<%- partial('components/plugins/aplayer') %>
	<% } %>

	<script>
	// 鼠标点击星星效果
	document.addEventListener('click', (e) => {
	  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 
	                 'purple', 'pink', 'cyan', 'lime', 'magenta'];
	  const container = document.body;
	  
	  // 创建5颗星星
	  for(let i=0; i<5; i++) {
	    const star = document.createElement('span');
	    star.className = `star ${colors[Math.floor(Math.random() * colors.length)]}`;
	    star.textContent = '✨';
	    
	    // 随机位置偏移（在点击点下方10-30px范围内）
	    const offsetX = (Math.random() - 0.5) * 40; // 水平偏移±20px
	    const offsetY = (Math.random() * 20) + 10;   // 垂直偏移10-30px
	    
	    star.style.left = `${e.clientX + offsetX}px`;
	    star.style.top = `${e.clientY + offsetY}px`;
	    
	    // 添加旋转效果
	    star.style.transform += `rotate(${Math.random() * 360}deg)`;
	    
	    container.appendChild(star);
	    
	    // 动画结束后移除元素
	    setTimeout(() => star.remove(), 1200);
	  }
	});
	</script>
</body>

</html>

  1. 位置偏移控制：

    • 水平偏移范围：±20px（通过offsetX计算）
    • 垂直偏移范围：10-30px（通过offsetY计算）
    • 确保星星出现在点击点下方且有一定分布

  2. 间距控制：

    • 垂直方向最小间距10px，最大30px
    • 水平方向随机分布，避免完全重叠

  3. 性能优化：

    • 星星元素在动画结束后自动移除
    • 使用CSS transform实现高性能动画

效果特点：

  • 每次点击在光标下方生成5颗彩色星星
  • 星星呈扇形分布，间距自然
  • 星星会执行完整的闪烁+上升+消失动画

可以通过以下参数调整效果：

  • 修改offsetX的乘数（当前是40）调整水平分布范围
  • 修改offsetY的计算式（当前是10+Math.random()*20）调整垂直分布范围
  • 调整font-size改变星星大小
  • 修改颜色数组colors调整可用颜色
  • 标题: hexo博客增加鼠标点击效果
  • 作者: lemon
  • 创建于 : 2025-04-12 22:41:29
  • 更新于 : 2025-04-12 22:45:40
  • 链接: https://lemon2003.github.io/post/20250412224129.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
hexo博客增加鼠标点击效果