灵感来源

之前看到了一位nodeseeker发的一个帖子引用了AquaInkGL的基于 WebGL 的水墨画背景特效项目来制作的域名停靠页面
当时闪瞎了包括本人自己在内的众多mjj的眼睛
很酷炫的交互背景让我印象深刻
今天看到有mjj在求openlist的美化代码
本人想到自己的openlist还是默认的样式
由于楼主本人是个小白，不是很懂如果使用AquaInkGL的WebGL
于是楼主找到哈基米老师研究了一下如何将AquaInkGL的WebGL背景引入到openlist里
效果还不错，遂分享给各位mjj们

效果展示

https://openlist.leoknox.de/
娱乐性质为主

自定义头部

<style> body, html {    overscroll-behavior: none; /* 进一步防止边缘滑动效果 */    touch-action: none; /* 核心：禁止触摸默认行为，如滑动刷新 */  }  /* 隐藏原版底部 */  .footer {    display: none !important;  }  /* 顶部导航栏 */  /* 白天模式 */  .hope-ui-light #root > .header {    background-color: rgba(255, 255, 255, 0.4) !important;    backdrop-filter: blur(10px) !important;  }  /* 夜间模式 */  .hope-ui-dark #root > .header {    background-color: rgba(66, 66, 66, 0.65) !important;    backdrop-filter: blur(10px) !important;  }    /* 主列表 */  /* 白天模式 */  .hope-ui-light .obj-box {    background-color: rgba(255, 255, 255, 0.4) !important;    backdrop-filter: blur(10px) !important;    border: 1px solid rgba(255, 255, 255, 0.18);  }  /* 夜间模式 */  .hope-ui-dark .obj-box {    background-color: rgba(66, 66, 66, 0.65) !important;    backdrop-filter: blur(10px) !important;    border: 1px solid rgba(255, 255, 255, 0.1);  }  /* Readme 文档区域 */  /* 白天模式 */  .hope-ui-light .hope-c-PJLV-ikSuVsl-css {    background-color: rgba(255, 255, 255, 0.4) !important;    backdrop-filter: blur(10px) !important;  }  /* 夜间模式 */  .hope-ui-dark .hope-c-PJLV-iiuDLME-css {    background-color: rgba(66, 66, 66, 0.65) !important;    backdrop-filter: blur(10px) !important;  }  /* 右侧边栏按钮 */  /* 白天模式 */  .hope-ui-light .hope-c-PJLV-ijgzmFG-css {    background-color: rgba(255, 255, 255, 0.5) !important;    backdrop-filter: blur(5px) !important;  }  /* 夜间模式 */  .hope-ui-dark .hope-c-PJLV-ijgzmFG-css {    background-color: rgba(66, 66, 66, 0.65) !important;    backdrop-filter: blur(5px) !important;  } /* “主页”面包屑导航条 (已更新为稳定选择器) */  /* 白天模式 */  .hope-ui-light nav.hope-breadcrumb {      background-color: rgba(255, 255, 255, 0.4) !important;      backdrop-filter: blur(10px) !important;      padding: 8px 16px !important;      border-radius: var(--hope-radii-xl) !important;      border: 1px solid rgba(255, 255, 255, 0.18);  }  /* 夜间模式 */  .hope-ui-dark nav.hope-breadcrumb {      background-color: rgba(66, 66, 66, 0.65) !important;      backdrop-filter: blur(10px) !important;      padding: 8px 16px !important;      border-radius: var(--hope-radii-xl) !important;      border: 1px solid rgba(255, 255, 255, 0.1);  }</style>

自定义内容

<script src="https://donaldkingliang.github.io/refactored-disco/fluid-background.js"></script>