屏保模式与动态壁纸

本站六款「酷炫页面」都是纯前端实时渲染,画面本身就是动态的。点卡片上的「屏保」,页面会进入真正的全屏——地址栏、标签栏、书签栏一起消失,只剩一块铺满屏幕、还在动的画面;页头页脚按钮全部隐去,闲置两秒后光标与浮层也淡出,鼠标一动才回来,按 Esc 退出。

真·全屏: Fullscreen API · 地址栏标签栏一并隐藏 · 屏幕常亮(Wake Lock)· 闲置自动隐藏控件 · Esc 退出

怎么真的挂起来

① 浏览器全屏零安装

点任意一张卡片的「屏保」,页面会自己请求全屏,地址栏与标签栏直接消失,不用按 F11。工具页控制条里的「屏保」按钮同样是原地全屏,不会刷新页面。

为什么要先点一下?浏览器规定全屏必须由用户操作触发,用网址直接打开 ?saver=1 时没法自动全屏,因此会盖一层「点击画面进入全屏屏保」,点一下即可。全屏后浏览器顶部会短暂出现「按 Esc 退出全屏」的黑色提示,这是系统行为,两秒后自动消失。

② Windows 动态壁纸最推荐

装 Lively Wallpaper(免费开源)或 Wallpaper Engine(Steam 付费)。前者「添加壁纸 → 输入网址」填本站屏保地址,或直接把下载到的单文件 HTML 拖进去。

桌面图标照样能用,动画在图标底下跑,鼠标移上去还能互动(磁力场会被光标牵引)。

③ 手机Android

Android 没有「HTML 动态壁纸」的入口,最省事的是用浏览器打开屏保地址、添加到主屏幕,点开就是全屏动态画面,配合屏保模式的常亮正好当桌面摆件。

想做成系统级壁纸,需要用 WallpaperService 包一层 WebView,属于要自己编译的工程量。

④ 手机iPhone

iOS 不允许第三方动态壁纸。折中办法:全屏播放后用系统录屏录 10~20 秒,再用「实况照片」类工具转成 Live Photo 设为锁屏,点亮屏幕时按一下就会动。

代价是它只是短视频循环,鼠标/触摸互动没有了。

为什么不能直接下载成 .scr 屏保

Windows 的 .scr 其实就是一个可执行程序,系统按 /s(全屏运行)、/c(配置)、/p(预览)三种参数去调用它,所以「网页」想变成真屏保,必须外面套一层能加载网页的壳(WebView2 或 Electron),这层壳得自己编译出 exe。macOS 的 .saver 同理,需要 Xcode 工程。本站只做纯前端,不发布可执行文件,因此提供的是两条替代路径:浏览器全屏与动态壁纸软件,两者跑的都是同一份实时渲染代码,动效与网页里完全一致,不存在「转成视频就变糊或变卡」的问题。其中浏览器全屏这条路径已经做到极限:进屏保时地址栏、标签栏、书签栏、任务栏一并隐藏,屏幕上只剩那块画面,视觉上与系统屏保没有差别,区别只在退出方式——按 Esc 退出全屏即回到普通页面。其中浏览器全屏这条路径已经做到极限:进屏保时地址栏、标签栏、书签栏、任务栏一并隐藏,屏幕上只剩那块画面,视觉上与系统屏保没有差别,区别只在退出方式——按 Esc 退出全屏即回到普通页面。

长时间挂机要注意

  • 这些画面全部实时演算,会持续占用 GPU。笔记本挂一晚建议插电,并把电源计划设成「不降低亮度」。
  • 星图与磁力场是深色高对比画面,OLED 屏幕长时间同一位置可能留下残影;墨迹海报已内置每 26 秒换一次晕染,正是为了防烧屏。
  • 屏保模式会自动申请屏幕常亮;如果你只是当壁纸,桌面本来就不会熄屏,这条只在手机/平板上起作用。
  • 页面切到后台(或壁纸软件暂停渲染)时动画会停,切回来自动继续。