分享几个Komari的自定义美化

不要吝啬鸡腿🍗 快快助力新人渡劫6级

食用方法：后台-设置-站点-自定义

示例在签名处

隐藏底部文字版权部分 /建议保留 尊重开发作者

<!-- 隐藏底部文字版权部分 -->
<style>
  footer, .site-footer {
    display: none !important;
  }
</style>

全屏樱花

<!-- 樱花 -->
<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script> <span class="js-cursor-container"></span> 

网页鼠标点击特效

<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script> <!--网页鼠标点击特效（爱心） -->

可拖拽动态导航按钮

<!-- 导航按钮入口：PC 可拖拽 + 手机贴边上下滑动吸附（白色毛玻璃 & 动效） -->
<style>
  :root{
    --glass-bg: rgba(255,255,255,.78);
    --glass-border: rgba(0,0,0,.08);
    --glass-shadow: 0 12px 28px rgba(0,0,0,.14);
    --fg:#1f2937; --fg-sub:#6b7280;
    --hover: rgba(0,0,0,.06);
    --accent:#3b82f6;
    --blur: 12px;
    --btn-size: 56px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --glass-bg: rgba(255,255,255,.86);
      --glass-border: rgba(0,0,0,.12);
      --glass-shadow: 0 14px 34px rgba(0,0,0,.35);
      --fg:#111827; --fg-sub:#4b5563;
      --hover: rgba(0,0,0,.08);
      --accent:#60a5fa;
    }
  }

  /* 容器：默认左下角（PC）；手机端会重载为右下角 */
  .dock-wrap{
    position:fixed; left:14px; bottom:14px; z-index:99999;
    touch-action: none; /* 便于 Pointer 事件控制拖拽 */
  }

  /* 圆形按钮（白色毛玻璃） */
  .dock-btn{
    position: relative;
    width:var(--btn-size); height:var(--btn-size); border-radius:999px;
    display:grid; place-items:center; cursor:pointer; overflow: visible;
    background:var(--glass-bg);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .dock-btn:hover{ transform: translateY(-1px) scale(1.02); }
  .dock-btn svg{ width:22px; height:22px; fill:var(--accent); }

  /* 面板（PC：按钮上方的卡片） */
  .dock-panel{
    position:absolute; left:0; bottom:calc(var(--btn-size) + 16px);
    min-width:240px; padding:14px; border-radius:14px;
    background:var(--glass-bg);
    backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
    border:1px solid var(--glass-border); box-shadow:var(--glass-shadow);
    opacity:0; transform: translateY(10px) scale(.98);
    pointer-events:none;
  }
  .dock-title{ font-weight:700;font-size:13px;color:var(--fg);opacity:.9;margin:2px 0 10px; }
  .dock-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  .dock-card{
    display:flex;align-items:center;gap:10px; text-decoration:none;
    padding:10px;border-radius:12px; color:var(--fg);
    border:1px solid var(--glass-border);
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
  }
  .dock-card:hover{ background:var(--hover); transform: translateY(-1px); border-color: rgba(59,130,246,.25); }
  .dock-card svg{ width:20px; height:20px; }
  .dock-card span{ font-weight:600; font-size:13px; }
  .dock-sub{ display:block;font-size:11px;color:var(--fg-sub);margin-top:2px; }

  /* 展开/收起动效（PC 卡片） */
  @keyframes popIn{ from{opacity:0; transform: translateY(12px) scale(.95);} to{opacity:1; transform: translateY(0) scale(1);} }
  @keyframes popOut{ from{opacity:1; transform: translateY(0) scale(1);} to{opacity:0; transform: translateY(12px) scale(.95);} }
  .dock-wrap.open .dock-panel{ opacity:1; pointer-events:auto; animation: popIn .18s ease both; }
  .dock-wrap.closing .dock-panel{ animation: popOut .16s ease both; }

  /* —— 大胆动效（PC/手机通用，未展开时启用） —— */
  .dock-wrap:not(.open) .dock-btn{
    animation: dock-bob 2.2s ease-in-out infinite, dock-glow 4s ease-in-out infinite;
  }
  /* 上下弹跳 + 放大缩小 */
  @keyframes dock-bob{
    0%   { transform: translateY(0) scale(1); }
    20%  { transform: translateY(-10px) scale(1.14); }
    45%  { transform: translateY(0) scale(1.05); }
    70%  { transform: translateY(-6px) scale(1.10); }
    100% { transform: translateY(0) scale(1); }
  }
  /* 光晕脉冲 */
  @keyframes dock-glow{
    0%,100% { box-shadow: 0 12px 28px rgba(59,130,246,.25), 0 0 0 0 rgba(59,130,246,.30); }
    50%     { box-shadow: 0 22px 44px rgba(59,130,246,.40), 0 0 0 14px rgba(59,130,246,0); }
  }
  /* 外圈波纹 */
  .dock-btn::after{
    content:""; position:absolute; inset:-10px; border-radius:999px;
    border:2px solid rgba(59,130,246,.38); opacity:0; transform: scale(.85);
  }
  .dock-wrap:not(.open) .dock-btn::after{ animation: ring 2.6s ease-out infinite; }
  @keyframes ring{
    0%   { opacity:.7; transform: scale(.7); }
    80%  { opacity:0;  transform: scale(1.6); }
    100% { opacity:0; }
  }
  .dock-wrap.open .dock-btn{ animation: none !important; }
  .dock-wrap.open .dock-btn::after{ display: none; }

  /* —— 手机端：按钮贴紧右下角，无安全距离；抽屉样式 —— */
  @media (max-width:640px){
    .dock-wrap{
      left: auto; right: 0; bottom: 0;  /* 真贴边，吸附感 */
      transform: translate(0,0);
    }
    /* 按钮尺寸/贴边：无 margin */
    .dock-btn{
      width: var(--btn-size); height: var(--btn-size);
      border-bottom-right-radius: 18px; /* 贴边的“吸附感”细节，可保留或去掉 */
    }
    /* 抽屉：按钮上方出现，居中 */
    .dock-panel{
      position: fixed;
      left: 50%;
      bottom: calc(var(--btn-size) + 12px);
      transform: translateX(-50%);
      width: 92vw; max-width: 560px;
      border-radius:16px; padding:14px;
    }
    .dock-grid{ grid-template-columns: 1fr; gap:8px; }
    .dock-card{ padding:12px; }
    .dock-card svg{ width:22px;height:22px; }
    .dock-card span{ font-size:14px; }
    .dock-sub{ font-size:12px; }

    /* 抽屉上滑动画（维持大胆幅度） */
    @keyframes sheetIn{ from{opacity:0; transform: translate(-50%, 12px);} to{opacity:1; transform: translate(-50%, 0);} }
    @keyframes sheetOut{ from{opacity:1; transform: translate(-50%, 0);} to{opacity:0; transform: translate(-50%, 12px);} }
    .dock-wrap.open .dock-panel{ animation: sheetIn .22s ease both; }
    .dock-wrap.closing .dock-panel{ animation: sheetOut .18s ease both; }
  }

  /* 系统要求减少动画时关闭 */
  @media (prefers-reduced-motion: reduce){
    .dock-btn,.dock-panel{ transition:none!important; animation:none!important; }
  }
</style>

<div class="dock-wrap" id="dock">
  <div class="dock-panel" aria-hidden="true">
    <div class="dock-title">快速入口</div>
    <div class="dock-grid">
      <!-- 博客 -->
      <a class="dock-card" href="https://misaka.si" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24"><path d="M6 3h9a3 3 0 0 1 3 3v13.5a.5.5 0 0 1-.77.42L14 18.5l-3.23 1.42a.5.5 0 0 1-.77-.42V6a1 1 0 0 0-1-1H6a1 1 0 1 0 0 2h2v2H6A3 3 0 0 1 6 3Z"/></svg>
        <div><span>博客</span><small class="dock-sub">Blog / Notes</small></div>
      </a>
      <!-- VPS 监控 -->
      <a class="dock-card" href="https://vps.kele.my" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24"><path d="M4 5h16a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-6l-2 2-2-2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm2 7h2.8l1.2-3 2.2 6 1.2-3H18"/></svg>
        <div><span>VPS 监控</span><small class="dock-sub">Probe / Monitor</small></div>
      </a>
      <!-- TG 联系 -->
      <a class="dock-card" href="https://t.me/ke1e0" target="_blank" rel="noopener">
        <svg viewBox="0 0 24 24"><path d="M21.9 2.7 2.8 10.1c-1 .4-.9 1.8.1 2l4.6 1.3 1.8 5.6c.3 1 1.6 1.1 2 .1l2.6-5.4 5.3 4.1c.8.6 1.9.1 2.1-.9l3-14.1c.2-.9-.7-1.7-1.6-1.3ZM8.6 13.2l9.7-6.1-7.8 7.3-.3 3.1-1.6-4.3Z"/></svg>
        <div><span>联系我（TG）</span><small class="dock-sub">@可樂</small></div>
      </a>
    </div>
  </div>

  <!-- 圆形导航按钮（可拖拽/滑动） -->
  <button class="dock-btn" id="dockBtn" title="导航" aria-label="打开导航">
    <svg viewBox="0 0 24 24"><path d="M3 3h6v6H3V3Zm6 6h6v6H9V9Zm6-6h6v6h-6V3ZM3 15h6v6H3v-6Zm12 0h6v6h-6v-6Z"/></svg>
  </button>
</div>

<script>
  (function(){
    const wrap = document.getElementById('dock');
    const btn  = document.getElementById('dockBtn');
    const panel= wrap.querySelector('.dock-panel');

    let animating = false;
    function openDock(){
      if(animating || wrap.classList.contains('open')) return;
      wrap.classList.remove('closing'); wrap.classList.add('open');
      panel && panel.setAttribute('aria-hidden','false');
      animating = true; setTimeout(()=>animating=false, 240);
    }
    function closeDock(){
      if(animating || !wrap.classList.contains('open')) return;
      wrap.classList.remove('open'); wrap.classList.add('closing');
      panel && panel.setAttribute('aria-hidden','true');
      animating = true; setTimeout(()=>{ wrap.classList.remove('closing'); animating=false; }, 240);
    }

    btn.addEventListener('click', (e)=>{
      // 点击优先：若处于拖拽中将被 Pointer 逻辑拦截
      if(wrap.__dragging) return;
      wrap.classList.contains('open') ? closeDock() : openDock();
    });

    // ======= 拖拽/滑动（PC 可自由拖，手机仅允许沿右侧上下滑动并吸附） =======
    let startX=0, startY=0, startLeft=0, startBottom=0;
    let isMobile = () => window.matchMedia('(max-width: 640px)').matches;

    function clamp(v, min, max){ return Math.min(max, Math.max(min, v)); }

    function pointerDown(e){
      wrap.__dragging = true;
      btn.setPointerCapture(e.pointerId);
      const rect = wrap.getBoundingClientRect();
      // 记录初始
      startX = e.clientX; startY = e.clientY;
      startLeft = rect.left; 
      // 用 bottom 而不是 top，适配贴边
      startBottom = window.innerHeight - rect.bottom;
      // 暂停动画避免拖拽时晃动
      btn.style.animation = 'none';
      btn.style.transition = 'none';
    }

    function pointerMove(e){
      if(!wrap.__dragging) return;

      if(isMobile()){
        // 仅允许沿右边上下滑动：固定在右侧，更新 bottom
        const dy = e.clientY - startY;
        let newBottom = clamp(startBottom - dy, 0, window.innerHeight - parseFloat(getComputedStyle(btn).height));
        wrap.style.left = 'auto';
        wrap.style.right = '0px';
        wrap.style.bottom = `${newBottom}px`;
      }else{
        // PC：自由拖拽（限制不出界）
        const dx = e.clientX - startX;
        const dy = e.clientY - startY;
        let newLeft = clamp(startLeft + dx, 0, window.innerWidth - btn.offsetWidth);
        let newBottom = clamp(startBottom - dy, 0, window.innerHeight - btn.offsetHeight);

        wrap.style.left = `${newLeft}px`;
        wrap.style.right = 'auto';
        wrap.style.bottom = `${newBottom}px`;
      }

      // 面板位置在拖动时也要相对更新（确保始终在按钮上方/合适）
      repositionPanel();
    }

    function pointerUp(e){
      if(!wrap.__dragging) return;
      wrap.__dragging = false;
      btn.releasePointerCapture(e.pointerId);

      // 吸附逻辑：
      if(isMobile()){
        // 始终吸附在右边（已固定 right:0），仅确保不超界即可
        wrap.style.right = '0px';
        // 无需额外 margin：保持“贴边”效果
      }else{
        // PC：可自由停放；若离左右边更近，可贴边吸附一点点（可选）
        const rect = wrap.getBoundingClientRect();
        const leftDist = rect.left;
        const rightDist = window.innerWidth - rect.right;
        if(Math.min(leftDist, rightDist) < 20){
          if(leftDist < rightDist){
            wrap.style.left = '0px';
            wrap.style.right = 'auto';
          }else{
            wrap.style.left = 'auto';
            wrap.style.right = '0px';
          }
        }
      }

      // 恢复按钮过渡（动画会在未展开时自动恢复）
      btn.style.transition = '';
      // 触发一次面板位置修正
      repositionPanel();
    }

    function repositionPanel(){
      // 根据按钮在屏幕的左右位置，决定面板靠左还是靠右展开，防止出屏
      const r = wrap.getBoundingClientRect();
      const panelRect = panel.getBoundingClientRect();
      const preferRight = r.left < 16; // 挨左边，面板向右展开
      const preferLeft  = (window.innerWidth - r.right) < 16; // 挨右边，面板向左展开

      if(isMobile()){
        // 手机端使用底部抽屉，固定居中，无需左右判断
        panel.style.left = '50%';
        panel.style.transform = 'translateX(-50%)';
      }else{
        // PC：根据边缘自适应
        if(preferLeft){
          // 贴右边，面板向左展开
          panel.style.left = 'auto';
          panel.style.right = '0px';
        }else if(preferRight){
          // 贴左边，面板向右展开
          panel.style.left = '0px';
          panel.style.right = 'auto';
        }else{
          // 中间位置，默认向左展开（紧贴按钮左侧）
          panel.style.left = '0px';
          panel.style.right = 'auto';
        }
      }
    }

    // 绑定 Pointer 事件
    btn.addEventListener('pointerdown', pointerDown);
    window.addEventListener('pointermove', pointerMove);
    window.addEventListener('pointerup',   pointerUp);
    window.addEventListener('pointercancel', pointerUp);
    window.addEventListener('resize', repositionPanel);

    // 点击外部收起
    document.addEventListener('click', (e)=>{ if(!wrap.contains(e.target)) closeDock(); });
    document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeDock(); });

    // 初始一次定位
    repositionPanel();
  })();
</script>

设置页面字体

<!-- 引入抖音Sans字体(直接TTF引用) -->
<style>
    /* 使用@font-face定义字体 */
    @font-face {
        font-family: 'Douyin Sans';
        src: url('https://cdn.jsdelivr.net/gh/bytedance/fonts@main/DouyinSans/DouyinSansBold.ttf') format('truetype');
        font-weight: bold;
        font-style: normal;
        font-display: swap; /* 优化字体加载过程 */
    }
    
 <!--  设置页面字体 -->
    * {
        font-family: 'Douyin Sans', sans-serif !important; /* 设置所有元素使用抖音Sans字体 */
    }
    
    h1, h2, h3, h4, h5 {
        font-family: 'Douyin Sans', sans-serif !important; /* 设置标题使用抖音Sans字体 */
        font-weight: bold;
    }
</style>

底部跑马灯

<!-- 底部跑马灯 -->
<style>
  :root{
    --bm-speed: 22s;                 /* 跑马灯滚动一圈所需时间：改这里快/慢 */
    --bm-bg: rgba(255,255,255,.75);  /* 背景（浅色） */
    --bm-bg-dark: rgba(20,20,20,.65);/* 背景（深色） */
  }

  /* 包裹，用于“关闭”隐藏 */
.bm-wrap{
  width: 100%;
  margin: 40px auto 20px;    /* 顶部/底部留点间距，你可以改 */
  display: flex;
  justify-content: center;   /* 居中 */
}


  /* 胶囊条 */
  .bottom-marquee{
    width: min(92vw, 980px);
    height: 42px;
    border-radius: 999px;
    padding: 0 48px 0 16px;         /* 右侧留位置给关闭按钮 */
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    position: relative;
    pointer-events: auto;
    background:
      var(--bm-bg) padding-box,
      linear-gradient(90deg,#ff3b30,#ffcc00,#34c759,#007aff,#ff3b30) border-box;
    border: 2px solid transparent;
    background-repeat: no-repeat;
    background-size: auto, 200% 100%;
    animation: bm-border 6s linear infinite;
  }

  /* 渐变边框缓慢流动 */
  @keyframes bm-border{
    0%   { background-position: 0 0,   0% 0; }
    100% { background-position: 0 0, 200% 0; }
  }

  /* 深色页面时的背景（如果你的主题有 dark 类，会自动适配） */
  .dark .bottom-marquee{ background: var(--bm-bg-dark); border-color: transparent; }

  /* 轨道：让内容横向连续滚动 */
  .bm-track{
    position: absolute; inset: 0;
    display: flex; align-items: center; gap: 48px;
    white-space: nowrap;
    animation: bm-scroll var(--bm-speed) linear infinite;
    will-change: transform;
    padding: 0 8px;
  }
  .bottom-marquee:hover .bm-track{ animation-play-state: paused; } /* 悬停暂停 */

  /* 单条消息样式 */
  .bm-item{
    font: 600 14px/42px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
    opacity: .95;
  }

  /* 关闭按钮（纯 CSS） */
  .bm-close{
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    font-weight: 700; cursor: pointer; user-select: none;
    opacity: .75;
  }
  .bm-close:hover{ opacity: 1; }

  /* 关闭：checkbox 勾选后隐藏 */
  #bm-hide{ display: none; }
  #bm-hide:checked + .bottom-marquee{ display: none; }

  /* 滚动关键帧 */
  @keyframes bm-scroll{
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 轨道内容重复一遍，滚完一半正好无缝 */
  }

  /* 移动端细调 */
  @media (max-width: 640px){
    .bottom-marquee{ height: 38px; padding-right: 44px; }
    .bm-item{ font-size: 13px; line-height: 38px; }
    .bm-wrap{ bottom: 10px; }
  }
</style>

<div class="bm-wrap">
  <!-- 勾选隐藏 -->
  <input type="checkbox" id="bm-hide">
  <div class="bottom-marquee" role="region" aria-label="公告栏">
    <label for="bm-hide" class="bm-close" title="关闭">×</label>
    <div class="bm-track" aria-hidden="true">
      <!-- 👉 在这里改你的公告/签名文本；把 3~4 条复制一遍形成无缝循环 -->
      <span class="bm-item">Powered by Kele's Node ✨ Keep running</span>
      <span class="bm-item">欢迎来到可乐养鸡厂，祝你今天顺利！</span>
      <span class="bm-item">提示：请合理使用，保持稳定运行 😄</span>
  

      <!-- 下面是重复一遍，保证无缝滚动（别删） -->
      <span class="bm-item">Powered by Kele's Node ✨ Keep running</span>
      <span class="bm-item">欢迎来到可乐养鸡厂，祝你今天顺利！</span>
      <span class="bm-item">提示：请合理使用，保持稳定运行 😄</span>
    </div>
  </div>
</div>

顶部红色横幅

<!-- 顶部红色横幅：固定最顶 + 占位，不遮挡标题 + 关闭按钮 + 10秒自动关闭 -->
<style>
  #opening-banner{
    position: fixed; left: 0; top: 0; width: 100%;
    z-index: 99999;
    background: #e53935; color: #fff;
    text-align: center; font-weight: 800; font-size: 14px;
    padding: 10px 48px;
    line-height: 1.25;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
  }
  #opening-banner .close-btn{
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    border-radius: 50%; cursor: pointer; user-select: none;
    background: rgba(0,0,0,.15);
    font-weight: 900; color: #fff;
  }
  #opening-banner .close-btn:hover{ background: rgba(0,0,0,.25); }
  @media (max-width:640px){
    #opening-banner{ font-size: 13px; padding: 8px 44px; }
    #opening-banner .close-btn{ width:24px; height:24px; line-height:24px; }
  }
  /* 横幅占位：避免遮挡标题 */
  body.with-banner{
    padding-top: 48px; /* 这里要等于横幅高度，可根据字体/间距微调 */
  }
</style>

<script>
(function(){
  var START_Y = 2025, START_M = 9, START_D = 10;
  var AUTO_CLOSE_MS = 10000; // 10秒
  var STORAGE_KEY = 'opening_banner_closed';
  if (sessionStorage.getItem(STORAGE_KEY) === '1') return;

  function calcDays(){
    var now = new Date();
    var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    var start = new Date(START_Y, START_M - 1, START_D);
    var diff = Math.floor((today - start) / 86400000) + 1;
    return Math.max(1, diff);
  }

  var banner = document.createElement('div');
  banner.id = 'opening-banner';
  banner.innerHTML =
    '<span>🎉 庆祝本鸡厂开业第 ' + calcDays() + ' 天</span>' +
    '<span class="close-btn" title="关闭">×</span>';
  document.body.insertBefore(banner, document.body.firstElementChild);
  document.body.classList.add('with-banner'); // 给 body 增加 padding-top

  var timer = setTimeout(closeBanner, AUTO_CLOSE_MS);
  banner.querySelector('.close-btn').addEventListener('click', closeBanner);

  function closeBanner(){
    clearTimeout(timer);
    sessionStorage.setItem(STORAGE_KEY, '1');
    document.body.classList.remove('with-banner');
    if (banner && banner.parentNode) banner.parentNode.removeChild(banner);
  }

  // 跨零点自动更新
  function scheduleNextTick(){
    var now = new Date();
    var next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1);
    setTimeout(function(){
      if (!document.getElementById('opening-banner')) return;
      banner.querySelector('span').textContent =
        '🎉 庆祝本鸡厂开业第 ' + calcDays() + ' 天';
      scheduleNextTick();
    }, next - now);
  }
  scheduleNextTick();
})();
</script>