feat: bg 6s crossfade rotate, sakura fall, LXGW WenKai font

2026-07-09 19:05:02 +08:00
parent 61bff7beac
commit 7d3f8b078b
5 changed files with 108 additions and 1 deletions
@@ -0,0 +1,40 @@
+/* 全站背景图定时轮换（每 6 秒切换一张，交叉淡入淡出） */
+(function () {
+  var bgList = [
+    'https://image.987119.xyz/uploads/2026/07/18c0005c5dac2c14635.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c099240bbbdcbb113.webp',
+    'https://image.987119.xyz/uploads/2026/07/18c0993b4e03a5c5599.webp'
+  ]
+  var webBg = document.getElementById('web_bg')
+  if (!webBg || bgList.length < 2) return
+
+  // 覆盖层：用于交叉淡入，避免背景瞬间硬切
+  var overlay = document.createElement('div')
+  overlay.id = 'web_bg_overlay'
+  overlay.style.cssText =
+    'position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;' +
+    'background-size:cover;background-position:center;opacity:0;' +
+    'transition:opacity 1.5s ease;'
+  document.body.appendChild(overlay)
+
+  var idx = 0
+  var DURATION = 1500 // 淡入淡出时长(ms)，须与 CSS transition 一致
+
+  function swap() {
+    idx = (idx + 1) % bgList.length
+    var url = 'url("' + bgList[idx] + '")'
+    // 新图先放到覆盖层并淡入，盖住旧图
+    overlay.style.backgroundImage = url
+    void overlay.offsetWidth // 强制 reflow，确保过渡生效
+    overlay.style.opacity = '1'
+    // 过渡结束后，把底层也换成新图，再将覆盖层淡出，实现无缝循环
+    setTimeout(function () {
+      webBg.style.backgroundImage = url
+      webBg.style.backgroundSize = 'cover'
+      webBg.style.backgroundPosition = 'center'
+      overlay.style.opacity = '0'
+    }, DURATION)
+  }
+
+  setInterval(swap, 6000)
+})()