初衷

最近一直在鼓捣个人网盘，从 Alist 换到了 OpenList。作为个爱折腾的人，总觉得默认界面差点意思，想找点办法让它更好看。

也不知道从啥时候起，我彻底迷上了液态玻璃效果，尤其是那种全透明、不带模糊的，看着特别通透。干脆自己结合 AI 整了个 OpenList-CSS，把这效果搬到我的网盘界面上。

设计思路

设计思路其实特简单，就想整一个既好看又实用的样式配置。

好看是第一要务

既然要做液态玻璃效果，半透明、毛玻璃这些元素肯定不能少。我用了 backdrop-filter实现模糊效果，搭配半透明背景，层次感一下就出来了。再加上统一的圆角设计，整体看着特别和谐。

实用也不能丢

光好看也不行，还得实用。我在底部加了信息栏，显示版权信息、传统十二时辰、页面加载耗时和网站运行时间，这些小功能都挺实用的。

配置要简单

我知道不是所有人都懂代码，所以把所有可配置的参数都集中到一个区域，用 CSS 变量管理。就算不懂代码，也能通过修改变量值来定制自己喜欢的效果。

技术实现

CSS部分

  • CSS3变量：用 :root定义全局变量，方便统一管理和修改
  • backdrop-filter：实现毛玻璃效果，这是液态玻璃效果的核心
  • 响应式设计：适配不同屏幕尺寸，手机上也能正常显示
  • 统一风格：统一的圆角、间距和颜色方案，整体看着协调

JavaScript部分

  • 点击特效：点击页面时会出现随机文字和动画，增加点趣味性
  • 时间显示：实时显示当前时辰和页面加载耗时
  • 性能优化：用事件委托减少监听器数量，常量定义避免重复创建对象

效果展示

OpenList液态玻璃效果展示1

OpenList液态玻璃效果展示2

液态玻璃效果

全透明的导航栏和卡片，搭配背景图片，真的就像液态玻璃一样，看着特别有质感。

点击特效

点击页面时会出现随机文字和动画效果，就像在页面上撒了把彩色花瓣，每次点击都有小惊喜。

实用信息

底部信息栏内容虽然简单，但挺实用的，尤其是十二时辰显示，还带着点中国风。

适用范围

虽然我是为 OpenList 做的，但 Alist 也能用，操作步骤完全一样。

安装方法

安装超级简单，就几步：

  1. 打开OpenList-CSS文件
  2. 复制所有代码
  3. 登录OpenList或Alist管理后台
  4. 找到「全局设置」→「自定义内容」
  5. 粘贴代码并保存
  6. 刷新前端页面

整个过程不到 1 分钟，你的网盘界面就能焕然一新。

自定义小技巧

换个背景图片

默认用的是随机图片 API，你可以换成自己喜欢的图片：

--bg-image: url("https://example.com/your-image.jpg");

调整透明度

根据背景图片的明暗，调整半透明效果：

--day-bg-opacity: 0.2;          /* 增加背景透明度 */
--day-blur: 5px;               /* 添加模糊效果 */

自定义点击文字

在 JavaScript 部分找到 VALUES数组，添加你喜欢的文字：

const VALUES = ["💗小乖乖最美💗", "💗小坏蛋最帅💗", "加油！", "你真棒！"];

后续计划

暂时没什么特别的计划，先用着再说。

结语

其实这就是个小项目，主要是满足我自己的审美需求。既然做了，就分享给大家，希望能给用 OpenList 和 Alist 的朋友带来点惊喜。