子比主题美化教程两款鼠标点击特效代码

本文为子比主题定制 3D 立体爆炸效果 和 故障风粒子特效，两款特效均为动态炫酷风格，适配子比主题的视觉体系，且基于原生 JS 开发，不影响网站加载速度。

一、3D 立体爆炸效果

点击页面后，粒子会以三维空间轨迹向外弹射，伴随大小缩放和旋转效果，模拟真实的 3D 爆炸层次感，粒子还带有光影渐变，视觉冲击力更强。

实现代码

1. 进入 WordPress 后台 → 主题设置 → 自定义代码 → 自定义底部HTML代码
2. 粘贴以下代码（直接替换或新增，无需额外依赖）：

自定义调整参数

参数	说明	调整建议
colors	粒子渐变配色	可替换为子比主题主色，格式为linear-gradient(角度, 起始色, 结束色)
particleCount	粒子数量	3D 效果建议 15-20，过多会降低层次感
size	粒子大小范围	取值Math.random() * 6 + 6，数值越大粒子越大
speed	弹射速度	取值Math.random() * 4 + 3，数值越大粒子飞越快
lifetime	存活时间	单位 ms，建议 800-1200，时间越长动画越舒缓

二、故障风粒子特效

点击页面后，粒子呈现故障艺术（Glitch） 风格，带有红绿错位、像素化闪烁、不规则运动的效果，搭配复古像素风边框，适配潮流个性的博客风格。

实现代码

同样粘贴到 自定义底部HTML代码 区域：

自定义调整参数

参数	说明	调整建议
glitchColors	故障配色	经典红绿白，可替换为主题色
glitchOffset	错位偏移量	取值Math.random() * 3 - 1.5，数值越大错位越明显
glitchFreq	抖动频率	取值Math.random() * 10 + 5，数值越小抖动越频繁
box-shadow	故障光晕	可增减颜色数量，增强闪烁效果

三、通用注意事项

1. 两款特效二选一添加，同时添加会出现效果冲突；
2. 代码基于原生 JS，不依赖 jQuery，兼容子比主题所有版本；
3. 移动端触摸点击同样生效，无需额外适配；
4. 若特效不显示，检查是否有其他 JS 代码拦截了点击事件，或清空浏览器缓存重试。