鼠标移动生成引力,长按持续生成粒子
📋 提示词
请生成一套完整可直接运行的HTML粒子交互页面代码,包含HTML、CSS、JS,无需外部引入资源,纯原生实现。
功能需求:
1. Canvas全屏粒子背景,自适应窗口大小,窗口缩放自动重绘
2. 粒子基础:随机大小、随机透明度、缓慢无规则漂浮运动,边界碰撞回弹
3. 连线交互:鼠标移入画布生成引力场,鼠标附近粒子自动互相连线;粒子距离小于阈值自动生成浅色连接线,距离越近线条越粗、透明度越高
4. 鼠标效果:鼠标位置生成一圈扩散粒子,鼠标长按会持续生成新粒子跟随鼠标
5. 视觉风格:深色背景#0a0e17,粒子白色淡蓝渐变,连接线低透明度不刺眼,无多余UI元素
6. 性能优化:限制粒子总数800个,做离屏判断减少渲染压力,不会出现页面卡顿
7. 代码规范:结构分层清晰,注释完整,所有代码写在一个HTML文件内,打开即可运行