使用方法（入口与粘贴位置）
OpenList 不支持插件，通过后台注入 CSS/JS：
1. 登录管理后台：在站点地址栏加 /@manage（或 /manage）进入后台
2. 进入全局设置：左侧菜单 → 设置 → 全局（Global）
3. 粘贴代码：按所选版本将下方对应代码块完整复制，分别粘贴到下表两个字段
4. 保存：点击保存后刷新页面生效
参考了：https://1n34.top/2026/09/05/wZOJhViB
自定义头部
<style>
/* ============================================================
* OpenList 液态玻璃 + 高斯模糊美化 v2.5
* 全部内联，零外部依赖
* ============================================================ */
/* ====== 抖音美好体 DouyinSansBold ====== */
@import url('https://cn-font.claude-code-best.win/packages/dymh/dist/DouyinSansBold/result.css');
body, .hope-app-root,
button, input, select, textarea,
.hope-table, .hope-nav, .hope-toolbar {
font-family: 'DouyinSansBold', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
}
/* 站点公告等独立容器：统一字体（图标与 SVG 除外） */
body :not(svg):not([class*="icon"]):not([class*="Icon"]),
.hope-alert, .hope-toast, .hope-notice, .hope-banner,
.hope-modal, .hope-modal__content, .hope-dialog,
[role="dialog"], [role="alert"], [class*="notice"], [class*="banner"] {
font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
}
/* ---------- 可调参数 ---------- */
:root {
/* 玻璃模糊强度（降低，不要太模糊） */
--lg-blur: 6px;
/* 饱和度 */
--lg-saturate: 160%;
/* 边框颜色 - 浅灰 */
--lg-border: rgba(200, 200, 210, 0.20);
/* 圆角大小 */
--lg-radius: 14px;
/* 主题色：青色（RGB 0, 188, 212） */
--theme-primary: rgb(0, 188, 212);
}
/* ====== 背景图片 ====== */
body {
background-image: url('https://tc.yhpop.com/pic/pc/27.webp') !important;
background-size: cover !important;
background-position: center center !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
/* ====== 标题栏图标 PNG 透明部分 ====== */
header, .header, .header-left, .header-right,
nav, nav[class*="hope-"],
[class*="hope-c-iHfQeT"],
[class*="hope-c-PJLV"] {
background: transparent !important;
}
header img, header svg,
.header img, .header svg,
.header-left img, .header-left svg,
.header-right img, .header-right svg,
nav img, nav svg,
[class*="hope-c-iHfQeT"] img,
[class*="hope-c-iHfQeT"] svg,
[class*="hope-c-PJLV"] img,
[class*="hope-c-PJLV"] svg {
background: transparent !important;
mix-blend-mode: normal !important;
}
/* ============================================================
* A 档 · 容器级玻璃（带 backdrop-filter 高斯模糊）
* ============================================================ */
.header, .header-left, .header-right,
.nav,
.left-toolbar, .left-toolbar-box, .left-toolbar-in,
.center-toolbar, .toolbar-toggle,
.footer,
.hope-modal, .hope-modal__content, .hope-dialog,
[role="dialog"] {
background:
linear-gradient(180deg, rgba(200, 200, 210, 0.05), rgba(240, 240, 245, 0) 1px),
linear-gradient(135deg, rgba(200, 200, 210, 0.02), rgba(200, 200, 210, 0.01)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: var(--lg-radius) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 8px 32px rgba(0, 0, 0, 0.06),
0 0 16px 2px rgba(200, 200, 210, 0.05) !important;
}
.hope-select__trigger {
background: linear-gradient(135deg, rgba(200, 200, 210, 0.02), rgba(200, 200, 210, 0.01)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: var(--lg-radius) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 8px 32px rgba(0, 0, 0, 0.06) !important;
}
/* 按钮 */
.hope-button, .hope-icon-button {
background: linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.04)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: 10px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 2px 8px rgba(0, 0, 0, 0.05) !important;
transition: all 0.2s ease;
}
.hope-button:hover, .hope-icon-button:hover {
background: linear-gradient(135deg, rgba(200, 200, 210, 0.07), rgba(200, 200, 210, 0.04)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 4px 16px rgba(0, 0, 0, 0.05) !important;
transform: translateY(-1px);
}
/* 主按钮 - 青色主题 */
.hope-button[class*="hope-button--solid"],
.hope-app-root button[class*="hope-button--solid"] {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.35), rgba(0, 160, 180, 0.20)) !important;
color: white !important;
border-color: rgba(255, 255, 255, 0.25) !important;
}
/* select 下拉列表 */
.hope-select__listbox,
.hope-select__listbox > * {
background: linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.02)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: 12px !important;
}
.hope-select__listbox > *:hover {
background: rgba(200, 200, 210, 0.05) !important;
}
/* ====== 复选框 ====== */
.hope-checkbox__control,
[class*="hope-c-mHASU"] {
background: linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.02)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: 6px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 0 0 1px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s ease;
}
.hope-checkbox__control:hover,
[class*="hope-c-mHASU"]:hover {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 0 0 2px rgba(0, 0, 0, 0.03) !important;
border-color: rgba(200, 200, 210, 0.20) !important;
}
/* 复选框选中态 - 青色 */
.hope-checkbox__control[data-checked="true"],
[class*="hope-c-mHASU"][data-checked="true"] {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.35), rgba(0, 160, 180, 0.20)) !important;
border-color: rgba(0, 188, 212, 0.55) !important;
}
/* 复选框勾选标记 - 青色 */
.hope-checkbox__control svg,
[class*="hope-c-mHASU"] svg,
.hope-checkbox__control [class*="icon"],
[class*="hope-c-mHASU"] [class*="icon"] {
color: var(--theme-primary) !important;
stroke: var(--theme-primary) !important;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) !important;
}
/* 快捷键提示键 */
.hope-kbd,
[class*="hope-c-iDYHca"] {
background: linear-gradient(135deg, rgba(200, 200, 210, 0.07), rgba(200, 200, 210, 0.04)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid var(--lg-border) !important;
border-radius: 6px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
/* ============================================================
* B 档 · 轻量半透明
* ============================================================ */
.nav-item, .nav-link,
.search, .search_index, .input, .textfield,
.list, .list-item,
aside, .drawer, [role="menu"] {
background:
linear-gradient(180deg, rgba(200, 200, 210, 0.05), rgba(240, 240, 245, 0) 1px),
linear-gradient(135deg, rgba(200, 200, 210, 0.02), rgba(200, 200, 210, 0.01)) !important;
border: 1px solid var(--lg-border) !important;
border-radius: 10px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
.list-item {
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.list-item:hover {
background:
linear-gradient(180deg, rgba(200, 200, 210, 0.07), rgba(240, 240, 245, 0) 1px),
linear-gradient(135deg, rgba(200, 200, 210, 0.07), rgba(200, 200, 210, 0.04)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
/* 登录弹窗 - 透明玻璃，边框明显 */
[role="dialog"], .hope-modal, .hope-modal__content, .hope-dialog {
background:
linear-gradient(180deg, rgba(200, 200, 210, 0.05), rgba(240, 240, 245, 0) 1px),
linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.02)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
/* 菜单栏横线/分隔线 - 淡青色 */
.hope-divider,
[class*="hope-c-"][class*="divider"],
hr {
background-color: rgba(0, 188, 212, 0.06) !important;
border-color: rgba(0, 188, 212, 0.06) !important;
}
/* 面包屑分隔符 - 不使用青色背景，避免长方形bug */
.hope-breadcrumb__separator {
color: #00BCD4 !important;
background: transparent !important;
}
/* 面包屑导航 - 无液态玻璃边框 */
.hope-breadcrumb,
.hope-breadcrumb__list,
.hope-breadcrumb__item {
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ============================================================
* 登录页 - 隐藏明暗切换与语言选项
* ============================================================ */
/* 暗色/明暗模式切换按钮 */
.hope-dark-mode-toggle,
.hope-theme-toggle,
.hope-appearance-toggle,
[class*="dark-mode"],
[class*="theme-toggle"],
[class*="color-mode"],
[class*="appearance"],
[aria-label*="theme" i],
[aria-label*="dark" i],
[aria-label*="light" i],
svg[class*="moon"],
svg[class*="sun"],
svg[class*="Moon"],
svg[class*="Sun"],
button[class*="theme"],
button[title*="theme" i],
button[title*="dark" i],
button[title*="light" i] {
display: none !important;
}
/* 语言切换按钮 */
.hope-locale-switch,
.hope-lang-switch,
.hope-i18n-switch,
[class*="locale"],
[class*="lang-switch"],
[class*="language-switch"],
[class*="i18n"],
[aria-label*="language" i],
[aria-label*="lang" i],
button[class*="lang"],
button[title*="language" i],
button[title*="lang" i] {
display: none !important;
}
/* 链接颜色 - 青色 */
.hope-app-root a,
.hope-app-root [class*="link"] {
color: var(--theme-primary) !important;
}
.hope-app-root a:hover,
.hope-app-root [class*="link"]:hover {
color: rgb(0, 210, 230) !important;
}
/* 图标颜色 - 青色（仅 stroke/color，不动 fill 避免空心图标变实心） */
.hope-icon,
[class*="hope-icon"],
[class*="hope-c-iDYHca"] svg,
.toolbar-toggle svg,
.left-toolbar svg,
.center-toolbar svg {
color: var(--theme-primary) !important;
}
/* 首页文件列表表头文字 - 确保可见度 */
.hope-table th,
.hope-table__th,
[class*="hope-table"] th,
[class*="hope-c-"][class*="th"] {
color: #555555 !important;
font-weight: 600 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}
/* 首页文件列表单元格文字 */
.hope-table td,
.hope-table__td,
[class*="hope-table"] td,
[class*="hope-c-"][class*="td"] {
color: #444444 !important;
}
/* ============================================================
* 隐藏原 footer
* ============================================================ */
footer, footer.hope-stack,
[class*="hope-c-PJLV-ihQbspH-css"] {
display: none !important;
}
/* 右下角浮动菜单/工具栏 - 更透明 */
.center-toolbar, .toolbar-toggle,
.left-toolbar, .left-toolbar-box, .left-toolbar-in {
background:
linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.01)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
/* 文件列表容器 - 更透明 */
.obj-box,
.hope-stack[class*="obj"] {
background:
linear-gradient(135deg, rgba(200, 200, 210, 0.10), rgba(200, 200, 210, 0.05)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 6px 24px rgba(0, 0, 0, 0.06) !important;
}
/* 文件视图菜单（右上角/右下角视图切换菜单） */
.hope-menu,
.hope-menu__content {
background:
linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.04)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 8px 32px rgba(0, 0, 0, 0.06), 0 0 12px 1px rgba(200, 200, 210, 0.05) !important;
}
/* 菜单项本身无额外框，文字干净 */
.hope-menu__item,
.hope-menu__option,
.hope-menu [role="menuitem"] {
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* 表格容器 */
.hope-table,
table[class*="hope-"] {
background:
linear-gradient(135deg, rgba(200, 200, 210, 0.10), rgba(200, 200, 210, 0.05)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid rgba(200, 200, 210, 0.20) !important;
border-radius: 12px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
/* ============================================================
* 底部信息区域 - 正常文档流，不遮挡任何元素
* 登录按钮和文字框同一行
* ============================================================ */
.liquid-bottom-area {
position: relative;
z-index: auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 10px 0;
pointer-events: none;
}
/* 左下角登录按钮 - 窄，边框更明显 */
.liquid-login-btn {
display: inline-block;
padding: 4px 16px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
background:
linear-gradient(135deg, rgba(0, 188, 212, 0.42), rgba(0, 160, 180, 0.30)) !important;
border: 1px solid rgba(0, 188, 212, 0.55) !important;
border-radius: 8px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 3px 10px rgba(0, 0, 0, 0.06) !important;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
pointer-events: auto;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
white-space: nowrap;
}
.liquid-login-btn:hover {
background: linear-gradient(135deg, rgba(0, 188, 212, 0.55), rgba(0, 160, 180, 0.42)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 4px 12px rgba(0, 0, 0, 0.06) !important;
transform: translateY(-1px);
color: #ffffff;
}
/* 底部文字栏 - 宽 */
.liquid-footer-bar {
width: calc(100% - 32px);
max-width: 800px;
padding: 8px 16px;
margin: 0;
text-align: center;
font-size: 12px;
line-height: 1.4;
white-space: nowrap;
color: #ffffff;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 0, 0, 0.35);
background:
linear-gradient(180deg, rgba(200, 200, 210, 0.08), rgba(240, 240, 245, 0) 1px),
linear-gradient(135deg, rgba(200, 200, 210, 0.05), rgba(200, 200, 210, 0.03)) !important;
-webkit-backdrop-filter: blur(6px) saturate(140%) !important;
backdrop-filter: blur(6px) saturate(140%) !important;
border: 1px solid var(--lg-border) !important;
border-radius: 10px !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 2px 12px rgba(0, 0, 0, 0.05) !important;
pointer-events: auto;
}
.liquid-footer-bar a {
color: #a8dff0;
text-decoration: none;
transition: color 0.3s ease;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
pointer-events: auto;
}
.liquid-footer-bar a:hover {
color: #ffffff;
text-decoration: underline;
}
.liquid-footer-bar .divider {
margin: 0 8px;
color: #ffffff;
}
/* ============================================================
* 移动端适配
* ============================================================ */
@media (max-width: 768px) {
.liquid-bottom-area {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 6px !important;
padding: 8px 0 !important;
}
.liquid-login-btn {
padding: 3px 10px !important;
font-size: 11px !important;
}
.liquid-footer-bar {
width: calc(100% - 16px) !important;
padding: 6px 8px !important;
font-size: 11px !important;
}
.liquid-footer-bar .divider {
margin: 0 4px !important;
}
/* 移动端降低模糊以提升性能 */
:root {
--lg-blur: 6px;
}
}
</style>
<script>
/* ============================================================
* 雪花特效（snowfall-canvas.global.js 内联版）
* ============================================================ */
const defaultConfig={amount:1500,maxParticles:2500,size:[1,1],swingSpeed:[0.01,0.03],fallSpeed:[15,30],amplitude:[2,5],color:"rgb(225,225,225)",dprCap:2};
const rand=(min,max)=>Math.random()*(max-min)+min;
const SIZE_LAMBDA=0.0408;
const SIZE_C=100;
const SIZE_AMAX=SIZE_C*(1-Math.exp(-SIZE_LAMBDA*79))/SIZE_LAMBDA;
const sampleSize=()=>{const u=Math.random()*SIZE_AMAX;return 1-Math.log(1-(u*SIZE_LAMBDA)/SIZE_C)/SIZE_LAMBDA};
const BASE_WIDTH=1920;
const BASE_HEIGHT=1080;
const TWO_PI=Math.PI*2;
const SIN_TABLE_SIZE=2048;
const SIN_TABLE=new Float32Array(SIN_TABLE_SIZE);
for(let i=0;i<SIN_TABLE_SIZE;i+=1)SIN_TABLE[i]=Math.sin(i/SIN_TABLE_SIZE*TWO_PI);
const resolveElementById=(id,kind)=>{const el=document.getElementById(id);if(!el)throw new Error(`${kind} not found: ${id}`);return el};
const resolveElement=(elOrId,kind)=>{if(typeof elOrId==="string")return resolveElementById(elOrId,kind);return elOrId};
var SnowfallCanvas=class{canvas;ctx;container;running=false;rafId=null;lastTime=0;width=0;height=0;dpr=1;resizeObserver=null;resizeQueued=false;fallbackResizeAttached=false;particleCount=0;posX=new Float32Array(0);posY=new Float32Array(0);originX=new Float32Array(0);dx=new Float32Array(0);size=new Float32Array(0);amplitude=new Float32Array(0);velX=new Float32Array(0);velY=new Float32Array(0);visibilityHandlerAttached=false;autoPausedByVisibility=false;frameTimeAvg=16;perfCooldownFrames=0;dprOverride=null;config;constructor(options){this.canvas=resolveElement(options.canvas,"Canvas");this.container=resolveElement(options.container,"Container");const ctx=this.canvas.getContext("2d");if(!ctx)throw new Error("2D context is not supported");this.ctx=ctx;this.config={...defaultConfig,...options.config??{}};const sizeScale=this.config.size[0]??1;this.config.size=[sizeScale,sizeScale];this.resize();this.initParticles();this.start()}resize(){const rect=this.container.getBoundingClientRect();const dpr=Math.min(this.dprOverride??Math.min(window.devicePixelRatio||1,this.config.dprCap),this.config.dprCap);this.dpr=dpr;this.width=rect.width;this.height=rect.height;this.canvas.width=this.width*dpr;this.canvas.height=this.height*dpr;this.canvas.style.width=`${this.width}px`;this.canvas.style.height=`${this.height}px`;this.ctx.setTransform(dpr,0,0,dpr,0,0)}initParticles(){const count=Math.min(this.config.amount,this.config.maxParticles);this.particleCount=count;this.posX=new Float32Array(count);this.posY=new Float32Array(count);this.originX=new Float32Array(count);this.dx=new Float32Array(count);this.size=new Float32Array(count);this.amplitude=new Float32Array(count);this.velX=new Float32Array(count);this.velY=new Float32Array(count);const w=this.width;const h=this.height;const sizeScale=this.config.size[0];for(let i=0;i<count;i++){this.posX[i]=rand(0,w);this.posY[i]=rand(-h,0);this.originX[i]=this.posX[i];this.dx[i]=0;this.size[i]=Math.min(Math.max(sampleSize()*sizeScale,1),80);this.amplitude[i]=rand(this.config.amplitude[0],this.config.amplitude[1]);this.velX[i]=rand(this.config.swingSpeed[0],this.config.swingSpeed[1]);this.velY[i]=rand(this.config.fallSpeed[0],this.config.fallSpeed[1])}}update(dt){const w=this.width;const h=this.height;const count=this.particleCount;for(let i=0;i<count;i++){this.dx[i]+=this.velX[i]*dt;this.posX[i]=this.originX[i]+Math.sin(this.dx[i])*this.amplitude[i];this.posY[i]+=this.velY[i]*dt*0.06;if(this.posY[i]-this.size[i]>h){this.posY[i]=-this.size[i];this.originX[i]=rand(0,w);this.posX[i]=this.originX[i];this.dx[i]=0;this.size[i]=Math.min(Math.max(sampleSize()*this.config.size[0],1),80)}}}draw(){const ctx=this.ctx;const w=this.width;const h=this.height;ctx.clearRect(0,0,w,h);const count=this.particleCount;const color=this.config.color;ctx.fillStyle=color;for(let i=0;i<count;i++){const x=this.posX[i];const y=this.posY[i];const s=this.size[i];ctx.beginPath();ctx.arc(x,y,s/2,0,TWO_PI);ctx.fill()}}start(){if(this.running)return;this.running=true;this.lastTime=performance.now();this.loop()};loop=()=>{if(!this.running)return;const now=performance.now();const dt=Math.min((now-this.lastTime)/16.67,3);this.lastTime=now;this.update(dt);this.draw();this.rafId=requestAnimationFrame(this.loop)};stop(){this.running=false;if(this.rafId){cancelAnimationFrame(this.rafId);this.rafId=null}}destroy(){this.stop();if(this.resizeObserver){this.resizeObserver.disconnect();this.resizeObserver=null}}};window.SnowfallCanvas=SnowfallCanvas;
/* 初始化雪花 */
(function(){
function initSnow() {
var container=document.createElement('div');
container.id='snowfall-container';
container.style.cssText='position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none;overflow:hidden;';
document.body.appendChild(container);
var canvas=document.createElement('canvas');
canvas.id='snowfall-canvas';
container.appendChild(canvas);
try {
new SnowfallCanvas({canvas:canvas,container:container,config:{amount:100,maxParticles:200,color:'rgba(255, 255, 255, 0.20)',size:[0.2,0.2],amplitude:[2,5],swingSpeed:[0.01,0.03]}});
} catch(e) { console.log('Snowfall init error:', e); }
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initSnow);
} else {
initSnow();
}
setTimeout(initSnow, 500);
})();
</script>
自定义内容
<head>
<meta charset="UTF-8">
<title>樱花特效背景</title>
<style>
.hope-c-PJLV-ihgRsYc-css {
color: #fff; font-weight: normal;}
.hope-c-PJLV-ieXfLml-css {
color: #fff; font-weight: normal;}
.hope-c-PJLV-ikuZzan-css {
color: #fff; font-weight: normal;}
body {
margin: 0;
}
/* 樱花容器 */
#sakura-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
flex-direction: column;
pointer-events: none;
}
/* 遮罩两半部分的通用样式 */
.mask-half {
width: 100%;
height: 50%;
background-color: #D97E94;
transform-origin: center;
transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}
#loading-overlay.loaded .mask-top {
transform: translateY(-100%);
}
#loading-overlay.loaded .mask-bottom {
transform: translateY(100%);
}
/* 文字样式 */
#sakura-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.5rem; /* 字体大小 */
color: #fff;
text-align: center;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
z-index: 10000;
opacity: 1;
transition: opacity 2s ease;
pointer-events: none;
}
#sakura-text span {
display: inline-block;
animation: float 0.6s ease-in-out infinite alternate;
}
@keyframes float {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); } /* 文字动画上浮20像素 */
}
/* 加载完成后文字透明度 */
#loading-overlay.loaded #sakura-text {
opacity: 0;
}
</style>
</head>
<body>
<!-- 樱花飘落 -->
<div id="sakura-container"></div>
<div id="loading-overlay">
<div class="mask-half mask-top"></div>
<div class="mask-half mask-bottom"></div>
<div id="sakura-text">
<span>樱</span>
<span>花</span>
<span>正</span>
<span>在</span>
<span>坠</span>
<span>落</span>
</div>
</div>
<!-- 樱花 可选持续js yinghua.js 开场js sakuraPlus.js -->
<script src="https://r2.262918.xyz/js/sakuraPlus.js"></script>
<script>
window.addEventListener('load', function() {
const overlay = document.getElementById('loading-overlay');
const textSpans = document.querySelectorAll('#sakura-text span');
textSpans.forEach((span, index) => {
// 文字动画，每字延迟增加0.2秒
span.style.animationDelay = `${index *0.2}s`;
});
setTimeout(function() {
overlay.classList.add('loaded');
setTimeout(function() {
overlay.style.display = 'none';
}, 1500); // 等待1500ms确保动画
}, 10); // 初始延迟10ms
});
</script>
<div class="liquid-bottom-area">
<div class="liquid-footer-bar"><a href="/@login" class="liquid-login-btn">登录</a>
由<a href="https://dash.cloudflare.com" target="_blank" rel="noopener noreferrer">cloudflare </a>提供CDN <a href="https://dash.cloudflare.com" target="_blank" rel="noopener noreferrer">cloudflare</a>提供存储服务<a href="/@manage" class="liquid-login-btn">管理</a>
</div>
</div>
</body>
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容