效果概览
鼠标点击特效是博客中常见的趣味交互元素。点击页面任意位置时触发短暂的视觉动画，增强用户的参与感和趣味性。
Lumin Blog 支持 6 种点击特效：烟花、文字、爱心、星星、气泡、雪花，每种特效都有独立的颜色、大小、数量等可配置参数。
核心机制
事件监听
全局监听 click 事件，获取鼠标坐标：
1document.addEventListener('click', function(event) {
2 const x = event.clientX;
3 const y = event.clientY;
4 createEffect(x, y);
5});
为避免干扰正常的按钮点击和文本选择，需要判断点击目标：
1document.addEventListener('click', function(event) {
2 const tag = event.target.tagName.toLowerCase();
3 if (tag === 'a' || tag === 'button' || tag === 'input' ||
4 tag === 'textarea' || tag === 'select') {
5 return; // 跳过交互元素
6 }
7 createEffect(event.clientX, event.clientY);
8});
特效分发
1function createEffect(x, y) {
2 switch (effectType) {
3 case 'firework': return createFirework(x, y);
4 case 'text': return createTextEffect(x, y);
5 case 'heart': return createHeart(x, y);
6 case 'star': return createStar(x, y);
7 case 'bubble': return createBubble(x, y);
8 case 'snow': return createSnowflake(x, y);
9 }
10}
烟花特效
烟花是最复杂的特效，使用 Canvas 实现。每个爆炸点产生数十个彩色粒子，粒子向外扩散、重力下落、逐渐透明直到消失。
1function createFirework(x, y) {
2 const canvas = document.createElement('canvas');
3 canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:9999';
4 canvas.width = window.innerWidth;
5 canvas.height = window.innerHeight;
6 document.body.appendChild(canvas);
7 const ctx = canvas.getContext('2d');
8
9 const particles = [];
10 const colors = ['#ff5252', '#ffd740', '#69f0ae', '#40c4ff', '#b388ff'];
11 const count = 30;
12
13 for (let i = 0; i < count; i++) {
14 const angle = (Math.PI * 2 / count) * i;
15 const velocity = 2 + Math.random() * 4;
16 particles.push({
17 x, y,
18 vx: Math.cos(angle) * velocity,
19 vy: Math.sin(angle) * velocity,
20 color: colors[Math.floor(Math.random() * colors.length)],
21 alpha: 1,
22 size: 2 + Math.random() * 2
23 });
24 }
25
26 function animate() {
27 ctx.clearRect(0, 0, canvas.width, canvas.height);
28 let alive = false;
29
30 particles.forEach(p => {
31 p.x += p.vx;
32 p.y += p.vy;
33 p.vy += 0.05; // 重力
34 p.alpha -= 0.02; // 衰减
35
36 if (p.alpha > 0) {
37 alive = true;
38 ctx.globalAlpha = p.alpha;
39 ctx.fillStyle = p.color;
40 ctx.beginPath();
41 ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
42 ctx.fill();
43 }
44 });
45
46 if (alive) {
47 requestAnimationFrame(animate);
48 } else {
49 canvas.remove();
50 }
51 }
52
53 animate();
54}
参数配置
| 参数 | 默认值 | 说明 |
|---|---|---|
particleCount | 30 | 每次爆炸的粒子数 |
explosionRadius | 80 | 最大扩散半径（px） |
colors | 5 种 | 粒子颜色数组 |
文字特效
点击位置弹出随机文字，文字放大后逐渐透明消失：
1function createTextEffect(x, y) {
2 const texts = ['棒', '赞', '妙', '酷', '厉害'];
3 const text = texts[Math.floor(Math.random() * texts.length)];
4
5 const span = document.createElement('span');
6 span.textContent = text;
7 span.style.cssText = `
8 position: fixed; left: ${x - 15}px; top: ${y - 20}px;
9 color: ${colors[Math.floor(Math.random() * colors.length)]};
10 font-size: 24px; pointer-events: none; z-index: 9999;
11 animation: textPop 1s ease-out forwards;
12 `;
13 document.body.appendChild(span);
14
15 span.addEventListener('animationend', () => span.remove());
16}
CSS 动画：
1@keyframes textPop {
2 0% { opacity: 1; transform: translateY(0) scale(1); }
3 100% { opacity: 0; transform: translateY(-80px) scale(1.5); }
4}
文字列表和颜色均可通过配置文件自定义。
爱心和星星特效
爱心和星星特效使用 Unicode 字符或 SVG 图标。原理与文字特效类似，通过 CSS 动画控制位移和透明度，但增加了旋转和随机位移。
1@keyframes heartFloat {
2 0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
3 50% { opacity: 0.8; transform: translateY(-60px) rotate(20deg) scale(0.8); }
4 100% { opacity: 0; transform: translateY(-120px) rotate(-10deg) scale(0.4); }
5}
气泡特效
气泡从点击位置向上浮动，伴随左右摇摆：
1@keyframes bubbleRise {
2 0% { opacity: 0.9; transform: translateY(0) translateX(0) scale(0.3); }
3 50% { opacity: 0.6; transform: translateY(-60px) translateX(15px) scale(0.8); }
4 100% { opacity: 0; transform: translateY(-150px) translateX(-10px) scale(0.2); }
5}
雪花特效
雪花从点击位置缓慢飘落，随机摇摆：
1@keyframes snowFall {
2 0% { opacity: 1; transform: translateY(0) translateX(0) rotate(0deg); }
3 100% { opacity: 0; transform: translateY(100px) translateX(20px) rotate(180deg); }
4}
性能考虑
- Canvas 方案：粒子特效使用 Canvas，性能优于 DOM 操作，适合高粒子数场景
- DOM 方案：简单特效使用 DOM 动画，代码量小
- 自动清理：所有特效在动画结束后自动移除 DOM 节点或销毁 Canvas
- 防抖：限制连续点击时的特效生成频率，避免页面卡顿
配置
在配置文件中可切换特效类型和参数，后台管理系统也提供了可视化配置界面，无需手动修改代码。
留言评论
期待你的想法评论加载中