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)
+})()
@@ -0,0 +1,44 @@
+/* 樱花飘落效果：动态生成花瓣，CSS 动画飘落+左右摇摆+旋转 */
+(function () {
+  if (document.getElementById('sakura-container')) return
+
+  // 容器：铺满全屏、不拦截鼠标事件
+  var container = document.createElement('div')
+  container.id = 'sakura-container'
+  container.style.cssText =
+    'position:fixed;top:0;left:0;width:100%;height:100%;' +
+    'pointer-events:none;z-index:9999;overflow:hidden;'
+  document.body.appendChild(container)
+
+  // 样式与飘落关键帧（S 形摆动 + 旋转）
+  var style = document.createElement('style')
+  style.textContent =
+    '.sakura-petal{' +
+    '  position:absolute;top:-12%;' +
+    '  background:#ffb7c5;border-radius:100% 0 100% 0;' +
+    '  opacity:.85;will-change:transform;' +
+    '  animation:sakura-fall linear infinite;' +
+    '}' +
+    '@keyframes sakura-fall{' +
+    '  0%{transform:translate(0,-12vh) rotate(0deg);}' +
+    '  25%{transform:translate(18px,25vh) rotate(90deg);}' +
+    '  50%{transform:translate(-18px,50vh) rotate(180deg);}' +
+    '  75%{transform:translate(18px,75vh) rotate(270deg);}' +
+    '  100%{transform:translate(0,112vh) rotate(360deg);}' +
+    '}'
+  document.head.appendChild(style)
+
+  var PETALS = 28
+  for (var i = 0; i < PETALS; i++) {
+    var p = document.createElement('div')
+    p.className = 'sakura-petal'
+    var size = 8 + Math.random() * 10 // 8~18px
+    p.style.width = size + 'px'
+    p.style.height = size + 'px'
+    p.style.left = Math.random() * 100 + 'vw'
+    p.style.background = Math.random() > 0.5 ? '#ffb7c5' : '#ffc8d6'
+    p.style.animationDuration = (6 + Math.random() * 6).toFixed(2) + 's' // 6~12s
+    p.style.animationDelay = (-Math.random() * 12).toFixed(2) + 's' // 错落起步
+    container.appendChild(p)
+  }
+})()