我的阅读
0 篇收藏读过的文章会出现在这里。
收藏和记录仅保存在当前浏览器。
公告
欢迎来到祂科技的博客。这里记录前端、AI 与生活，目前文章为原创示例。
最新文章
- 日常网页工具怎么选：图片、计时、购物计算与文件整理生活随想
- 图片去水印与短视频解析：项目选择和本站接入记录前端手记
- 从编解码到开发调试：小站工具箱与开源项目索引前端手记
- AI 协作工作流：从灵感到上线AI 工具
- 文章
- 9
- 分类
- 4
- 标签
- 21
标签
492 字
1 分钟
在浏览器里种一片会呼吸的星空
阅读进度0%
输入关键词 本文为祂科技博客制作的原创示例文章，用于验证文章阅读与导航，不代表博主已发表的个人经历。
星空是背景，不是阅读的对手
二次元博客的氛围不必依靠密集特效。背景星光只需要给页面一点深度：粒子少一些，速度慢一些，亮度低一些，文字前方保持安静。标题和正文始终应该比装饰更容易看清。
Canvas 可以把许多粒子画在一个画布里。画布应设置为不可接收指针事件，不为每颗星星创建独立按钮，也不让它进入键盘焦点顺序。
用时间计算位置
每一帧直接移动固定距离，会让高刷新率屏幕上的粒子跑得更快。更稳妥的方式是保存上一帧时间，使用经过的秒数乘以速度更新位置。切回后台页面后，对时间差设置上限，避免粒子突然跳很远。
let previousTime = 0;function frame(time) { const seconds = previousTime ? Math.min((time - previousTime) / 1000, 0.05) : 0; previousTime = time; // particle.y += particle.speed * seconds; // 在这里清空画布并绘制粒子。}这只是时间步长示例，不是完整的动画运行器。真正接入页面时还需要管理初始化、尺寸变化、暂停和销毁。
停下也是设计的一部分
系统要求减少动态时，保留一张静态星空即可；页面隐藏时暂停动画，返回后重置上一帧时间。站内导航离开首页后，取消动画帧并释放监听器。重新进入时只创建一个循环。
验收不能只看“星星动了”：还要检查手机耗电、背景标签页、连续导航，以及没有动画时内容是否仍然完整。最舒服的星空，是读完文章才发现它一直陪在身后。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
在浏览器里种一片会呼吸的星空
https://example.com/posts/ta-tech-starlight/ 部分信息可能已经过时
相关文章 智能推荐