前端测试文章
发表于|更新于|前端
前端分类下的测试文章。
文章作者: G/ren
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 G/ren的小破站！
相关推荐
2026-05-22
标签测试文章
这是一篇专门用来测试标签云效果的测试文章。 正文这里写一些测试内容，用来验证标签页面是否能正确读取到标签数据。 标签云效果是通过 Canvas 绘制的 3D 粒子系统，支持鼠标互动和粒子连线。
2026-05-22
粒子效果文章一
🎨 Canvas 粒子动画粒子系统是 Web 开发中非常有趣的效果之一。 什么是粒子系统粒子系统由大量独立的小元素组成，每个元素都有自己的属性： 位置 (x, y, z) 速度 颜色 大小 透明度 3D 粒子连线通过矩阵旋转实现 3D 效果，粒子之间根据距离连线，营造出深邃的空间感。 1234567891011// 粒子类核心代码update() { // 更新角度 this.angleX += this.rotSpeedX; this.angleY += this.rotSpeedY; // 3D 旋转矩阵 let x = this.baseX, y = this.baseY, z = this.baseZ; // ... 旋转计算 this.x = x; this.y = y; this.z = z;} 鼠标靠近时粒子会被推开，产生互动感。
2026-05-22
星球轨道动画原理
🪐 星球轨道动画原理模拟太阳系行星公转效果。 运动方程行星位置由以下公式计算： 12const px = cx + Math.cos(p.angle) * p.orbitR;const py = cy + Math.sin(p.angle) * p.orbitR * 0.5; 椭圆轨道使用 Math.PI * 2 控制角度，实现周期性运动。 鼠标交互行星会响应鼠标位置产生轻微偏移： 1234if (dist < 120) { p.x = px + dx * 0.12; p.y = py + dy * 0.12;} 光晕效果使用径向渐变 createRadialGradient 实现行星发光效果。
2026-05-22
粒子效果文章二
✨ 粒子与鼠标交互粒子系统最大的魅力在于交互性。 鼠标追踪每个粒子都会响应鼠标位置，产生有趣的排斥效果： 123456789const dx = sx - mouse.x;const dy = sy - mouse.y;const dist = Math.sqrt(dx * dx + dy * dy);if (dist < 120) { const f = (120 - dist) / 120; this.baseX += dx * f * 0.04; this.baseY += dy * f * 0.04;} 颜色渐变粒子使用随机颜色，通过 opacity 和 scale 产生纵深感。
评论