子比主题全套美化代码合集（CSS + JS + HTML）

图片展示（就不全展示了只显示部分）

1. CSS 样式代码块

放置位置：子比主题后台 → 全局&功能 → 自定义代码 → 自定义CSS样式
将以下完整代码复制粘贴

/* ============================================================
   子比主题（zibll）美化 CSS 合集 —— 实测可用版
   使用位置：后台 → 子比主题设置 → 全局&功能 → 自定义代码 → 自定义CSS样式
   说明：全部为纯 CSS，不改动主题文件，更新主题不受影响；
         每一段相互独立，不想要哪段直接删除即可。
   ============================================================ */

/* ------------------------------------------------------------
   1. 文章随机彩色标签
   ------------------------------------------------------------ */
.article-tags{margin-bottom:10px}
.article-tags a{padding:4px 10px;background-color:#19B5FE;color:#fff;font-size:12px;line-height:16px;font-weight:400;margin:0 5px 5px 0;border-radius:2px;display:inline-block}
.article-tags a:nth-child(5n){background-color:#4A4A4A;color:#FFF}
.article-tags a:nth-child(5n+1){background-color:#ff5e5c;color:#FFF}
.article-tags a:nth-child(5n+2){background-color:#ffbb50;color:#FFF}
.article-tags a:nth-child(5n+3){background-color:#1ac756;color:#FFF}
.article-tags a:nth-child(5n+4){background-color:#19B5FE;color:#FFF}
.article-tags a:hover{background-color:#1B1B1B;color:#FFF}

/* ------------------------------------------------------------
   2. 主题 LOGO 扫光效果
   ------------------------------------------------------------ */
.navbar-brand{position:relative;overflow:hidden;margin:0}
.navbar-brand:before{
  content:"";
  position:absolute;
  left:-665px;top:-460px;
  width:200px;height:15px;
  background-color:rgba(255,255,255,.5);
  transform:rotate(-45deg);
  animation:searchLights 6s ease-in 0s infinite;
}
@keyframes searchLights{
  40%{left:-100px;top:0}
  60%{left:120px;top:100px}
  80%{left:-100px;top:0}
}

/* ------------------------------------------------------------
   3. 侧边渐变彩色滚动条
   ------------------------------------------------------------ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background-color:transparent}
::-webkit-scrollbar-thumb{
  border-radius:8px;
  background:linear-gradient(135deg,#3498db,#8e44ad);
}

/* ------------------------------------------------------------
   4. 首页文章列表悬停上浮 + 缩略图微放大
   ------------------------------------------------------------ */
.posts-item{transition:all .3s ease}
.posts-item:hover{
  transform:translateY(-5px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.item-thumbnail{overflow:hidden}
.item-thumbnail img{transition:all .5s ease}
.posts-item:hover .item-thumbnail img{transform:scale(1.05)}

/* ------------------------------------------------------------
   5. 头像悬停旋转放大
   ------------------------------------------------------------ */
.avatar{border-radius:50%;transition:all .6s ease}
.avatar:hover{transform:rotate(360deg) scale(1.1)}

/* ------------------------------------------------------------
   6. 昵称彩色流光特效（渐变流动文字）
   ------------------------------------------------------------ */
.display-name{
  background-image:-webkit-linear-gradient(90deg,#07c160,#fb6bea 25%,#3aedff 50%,#fb6bea 75%,#28d079);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-size:100% 600%;
  animation:wzw 10s linear infinite;
}
@keyframes wzw{
  0%{background-position:0 0}
  100%{background-position:0 -300%}
}

/* ------------------------------------------------------------
   7. 自定义文字选中颜色（蓝色选中、无背景框）
   ------------------------------------------------------------ */
::selection{
  background:transparent !important;
  color:#007bff !important;
  text-shadow:none !important;
}
::-moz-selection{
  background:transparent !important;
  color:#007bff !important;
  text-shadow:none !important;
}

/* ------------------------------------------------------------
   8. "免费资源"付费标签：柔和渐变 + 流光扫过
   ------------------------------------------------------------ */
.meta-pay.but.jb-yellow{
  display:inline-block;
  padding:4px 12px;
  font-size:12px;
  font-weight:600;
  color:#fff !important;
  border-radius:999px;
  line-height:1.2;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ff9ecb 0%,#ffc3a0 25%,#a18fff 50%,#7fdfff 75%,#6fffd2 100%);
  box-shadow:0 2px 8px rgba(160,120,255,.25),0 0 12px rgba(120,200,255,.15);
  transition:all .25s ease;
}
.meta-pay.but.jb-yellow::before{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:60%;height:100%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
  animation:freeTagLight 2.8s linear infinite;
}
.meta-pay.but.jb-yellow:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 4px 14px rgba(160,120,255,.35),0 0 18px rgba(120,200,255,.25);
}
@keyframes freeTagLight{
  0%{left:-60%}
  100%{left:120%}
}

/* ------------------------------------------------------------
   9. 文章列表卡片左上角 MAC 红黄绿三点
   ------------------------------------------------------------ */
.posts-item.card{padding:35px 10px 10px 10px !important}
.posts-item{position:relative !important}
.posts-item.card::before{
  content:"";
  display:block;
  background:#fc625d;
  top:13px;left:15px;
  border-radius:50%;
  width:9px;height:9px;
  box-shadow:16px 0 #fdbc40,32px 0 #35cd4b;
  z-index:1;
  position:absolute;
}

/* ------------------------------------------------------------
   10. 备案号 / 页脚文字炫彩流动渐变（需配合HTML使用）
   ------------------------------------------------------------ */
.by-p{
  font-weight:600;
  background:-webkit-linear-gradient(45deg,#70f7fe,#fbd7c6,#fdefac,#bfb5dd,#bed5f5);
  color:transparent;
  -webkit-background-clip:text;
  animation:ran 20s linear infinite;
}
@keyframes ran{
  from{background-position:0}
  to{background-position:2000px 0}
}

/* 版权声明 - 流光旋转渐变边框（配合HTML使用） */
@keyframes zb-borderspin{to{transform:rotate(360deg)}}
.zbfox-box{
  position:relative;
  padding:22px;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  z-index:0;
}
.zbfox-box::before{
  content:"";
  position:absolute;
  z-index:-2;
  left:-50%;top:-50%;
  width:200%;height:200%;
  background:conic-gradient(#667eea,#f093fb,#4facfe,#43e97b,#fa709a,#667eea);
  animation:zb-borderspin 4s linear infinite;
}
.zbfox-box::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:2px;top:2px;right:2px;bottom:2px;
  border-radius:15px;
  background:#fff;
}
/* 右侧悬浮按钮组美化 */
.float-widget-item{
  border-radius:14px !important;
  background:#fff;
  box-shadow:0 4px 12px rgba(30,50,90,.10);
  transition:all .3s ease;
  overflow:hidden;
  margin-bottom:8px;
}
.float-widget-item:hover{
  transform:translateY(-2px) scale(1.06);
  background:linear-gradient(135deg,#667eea,#764ba2);
  box-shadow:0 8px 20px rgba(102,126,234,.35);
}
.float-widget-item:hover i,
.float-widget-item:hover svg{
  color:#fff !important;
  fill:#fff !important;
}
/* 菜单emoji垂直居中（加强版） */
.menu-item a{
  line-height:1.4;
  display:inline-flex;
  align-items:center;
  gap:2px;
}
/* 自定义右键菜单美化（与JS配合） */
.zb-context-menu{
  position:fixed;z-index:99999;
  min-width:180px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border:1px solid #eceef3;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(30,50,90,.18);
  padding:6px;
  display:none;
  user-select:none;
}
.zb-context-menu.show{display:block;animation:zbMenuIn .15s ease}
@keyframes zbMenuIn{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}
.zb-context-menu a,
.zb-context-menu .zb-ctx-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;font-size:13px;color:#4a5568;
  border-radius:8px;cursor:pointer;text-decoration:none;
  transition:all .15s ease;
}
.zb-context-menu a:hover,
.zb-context-menu .zb-ctx-item:hover{
  background:linear-gradient(90deg,#ff9d4d,#ff6a00);
  color:#fff;
}
/* 首页 Banner · 极简炫彩 */
.xt-banner{
  padding:56px 20px 40px;
  text-align:center;
}
.xt-banner h2{
  font-size:34px;font-weight:800;margin:0 0 14px;letter-spacing:2px;
  background-image:-webkit-linear-gradient(90deg,#ff6a00,#e63946 30%,#7b2ff7 65%,#1d7dff);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-size:100% 600%;
  animation:xtFlow 8s linear infinite;
}
.xt-banner p{
  font-size:16px;font-weight:600;margin:0;letter-spacing:1px;
  background-image:-webkit-linear-gradient(90deg,#f72585,#ff6a00 25%,#06a77d 50%,#1d7dff 75%,#7b2ff7);
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  background-size:100% 600%;
  animation:xtFlow 8s linear infinite;
}
@keyframes xtFlow{
  0%{background-position:0 0}
  100%{background-position:0 -300%}
}
@media (max-width:640px){
  .xt-banner{padding:40px 16px 30px}
  .xt-banner h2{font-size:24px}
  .xt-banner p{font-size:14px}
}
/* ============================================================
   全局背景 · 柔雾（免上传版，SVG 已内嵌为 base64）
   ============================================================ */
body{
  background-color:#f7f8fa !important;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTIwIiBoZWlnaHQ9IjEwODAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJiYXNlIiB4MT0iMCIgeTE9IjAiIHgyPSIwLjQiIHkyPSIxIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmRmYmY3Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjU1IiBzdG9wLWNvbG9yPSIjZjdmOGZhIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2YyZjRmNyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iYjEiIGN4PSIuNSIgY3k9Ii41IiByPSIuNSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmN2ExYSIgc3RvcC1vcGFjaXR5PSIuMTMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmY3YTFhIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgICA8cmFkaWFsR3JhZGllbnQgaWQ9ImIyIiBjeD0iLjUiIGN5PSIuNSIgcj0iLjUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1YjhkZWYiIHN0b3Atb3BhY2l0eT0iLjExIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzViOGRlZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJiMyIgY3g9Ii41IiBjeT0iLjUiIHI9Ii41Ij4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZjA0NDk0IiBzdG9wLW9wYWNpdHk9Ii4wOCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMDQ0OTQiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iYjQiIGN4PSIuNSIgY3k9Ii41IiByPSIuNSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzIzYjNhNSIgc3RvcC1vcGFjaXR5PSIuMDgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMjNiM2E1IiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgoKICA8cmVjdCB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIiBmaWxsPSJ1cmwoI2Jhc2UpIi8+CgogIDwhLS0g5aSn6IyD5Zu05p+U5YWJ5Zui77ya5qmZ77yI5bem5LiKL+mhtumDqO+8iSsg6JOd77yI5Y+z77yJKyDnsonvvIjkuK3kuIvvvIkrIOmdku+8iOW3puS4i++8iSAtLT4KICA8Y2lyY2xlIGN4PSIyNDAiIGN5PSI2MCIgcj0iNjIwIiBmaWxsPSJ1cmwoI2IxKSIvPgogIDxjaXJjbGUgY3g9IjE3NjAiIGN5PSIyMjAiIHI9IjU2MCIgZmlsbD0idXJsKCNiMikiLz4KICA8Y2lyY2xlIGN4PSIxMTgwIiBjeT0iODgwIiByPSI1MjAiIGZpbGw9InVybCgjYjMpIi8+CiAgPGNpcmNsZSBjeD0iMTIwIiBjeT0iOTAwIiByPSI0ODAiIGZpbGw9InVybCgjYjQpIi8+CiAgPGNpcmNsZSBjeD0iOTgwIiBjeT0iMTgwIiByPSIzMDAiIGZpbGw9InVybCgjYjEpIi8+CgogIDwhLS0g5p6B57uG6aKX57KS5oSf77yM6YG/5YWN5aSn6Z2i56ev57qv6Imy5q275p2/IC0tPgogIDxnIG9wYWNpdHk9Ii4wNSIgZmlsbD0iIzdhODg5OSI+CiAgICA8Y2lyY2xlIGN4PSIxODAiIGN5PSI0MjAiIHI9IjIiLz48Y2lyY2xlIGN4PSI2MjAiIGN5PSIyNjAiIHI9IjIiLz48Y2lyY2xlIGN4PSIxMDQwIiBjeT0iNTIwIiByPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSIxNDgwIiBjeT0iMzgwIiByPSIyIi8+PGNpcmNsZSBjeD0iMzYwIiBjeT0iNzAwIiByPSIyIi8+PGNpcmNsZSBjeD0iODIwIiBjeT0iODQwIiByPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSIxMzYwIiBjeT0iNzAwIiByPSIyIi8+PGNpcmNsZSBjeD0iMTcyMCIgY3k9IjYyMCIgcj0iMiIvPjxjaXJjbGUgY3g9IjUyMCIgY3k9IjE2MCIgcj0iMiIvPgogICAgPGNpcmNsZSBjeD0iMTI0MCIgY3k9IjMwMCIgcj0iMiIvPjxjaXJjbGUgY3g9IjI2MCIgY3k9Ijk4MCIgcj0iMiIvPjxjaXJjbGUgY3g9IjE2MDAiIGN5PSI5MDAiIHI9IjIiLz4KICAgIDxjaXJjbGUgY3g9IjkwMCIgY3k9IjY0MCIgcj0iMiIvPjxjaXJjbGUgY3g9IjcwMCIgY3k9IjQ4MCIgcj0iMiIvPjxjaXJjbGUgY3g9IjExMjAiIGN5PSI3NjAiIHI9IjIiLz4KICA8L2c+Cjwvc3ZnPgo=") !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
  background-position:center top !important;
}
/* 深色模式下不覆盖，保持主题自带深色背景 */
body.dark-theme{
  background-image:none !important;
  background-color:var(--main-bg-color) !important;
}
/* 图片加载慢时的兜底色，避免白屏闪烁 */
html{background-color:#f7f8fa}

二、JavaScript 交互代码

放置位置：子比主题后台 → 全局&功能 → 自定义代码 → 自定义JavaScript

将以下完整代码复制粘贴

// 离开页面动态标题
(function(){
  var title = document.title;
  document.addEventListener('visibilitychange', function(){
    document.title = document.hidden ? '别走呀，快回来看看~ (´･ω･`)' : title;
  });
})();
// 复制自动加版权信息
document.addEventListener('copy', function(e){
  var selection = window.getSelection().toString();
  if (selection.length > 30) {
    e.clipboardData.setData('text/plain',
      selection + '\n\n文章来源：站点名称\n原文链接：' + location.href);
    e.preventDefault();
  }
});
/* 自定义右键菜单 */
(function(){
  var menu = document.createElement('div');
  menu.className = 'zb-context-menu';
  menu.innerHTML =
    '<a href="javascript:history.back()">⬅️ 返回上页</a>' +
    '<a href="javascript:history.forward()">➡️ 前进</a>' +
    '<a href="javascript:location.reload()">🔄 刷新页面</a>' +
    '<a href="javascript:scrollTo({top:0,behavior:\'smooth\'})">🔝 回到顶部</a>' +
    '<div style="height:1px;background:#eceef3;margin:6px 4px"></div>' +
    '<a href="/">🏠 返回首页</a>' +
    '<span class="zb-ctx-item" id="zbCopyLink">🔗 复制本文链接</span>';
  document.body.appendChild(menu);

  // 输入框、文本域、图片上保留浏览器原生右键（可复制粘贴/另存图片）
  document.addEventListener('contextmenu', function(e){
    if (e.target.closest('input,textarea,[contenteditable],img')) return;
    e.preventDefault();
    menu.style.left = Math.min(e.clientX, innerWidth - 200) + 'px';
    menu.style.top  = Math.min(e.clientY, innerHeight - 280) + 'px';
    menu.classList.add('show');
  });
  document.addEventListener('click', function(){ menu.classList.remove('show'); });
  document.addEventListener('scroll', function(){ menu.classList.remove('show'); }, true);
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') menu.classList.remove('show');
  });

  // 复制本文链接
  var item = document.getElementById('zbCopyLink');
  item.addEventListener('click', function(){
    navigator.clipboard.writeText(location.href);
    var old = item.textContent;
    item.textContent = '✅ 已复制本文链接';
    setTimeout(function(){ item.textContent = old; }, 1500);
  });
})();

三、HTML 版权声明框（带流光边框）

放置位置（任选一种）：

• 若希望显示在每篇文章底部，可使用子比主题的“文章底部自定义HTML”功能（若有），或通过钩子添加。
• 若希望全局显示在页脚，可放在“页脚自定义HTML”中。
• 也可以作为小工具（文本模块）插入到侧边栏或特定位置。
• 以下为完整的 HTML 代码

<div class="zbfox-box">
  <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px;">
    <div style="width:34px;height:34px;border-radius:50%;background:conic-gradient(#667eea,#f093fb,#4facfe,#43e97b,#667eea);display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;">&copy;</div>
    <div style="font-size:16px;font-weight:700;background:linear-gradient(90deg,#667eea,#f093fb);-webkit-background-clip:text;color:transparent;">版权声明</div>
  </div>
  <div style="font-size:13px;line-height:2;color:#7a8599;">
    本文版权归 <b style="color:#2c3e50;">站点名称</b> 所有，转载请保留原文出处并注明本文链接：<br>
    <a href="https://你的域名.com" style="color:#667eea;text-decoration:none;">https://你的域名.com</a><br>
    本站内容仅供学习交流，禁止商业运营，如有侵权请联系站长处理。
  </div>
</div>

 使用提示

• 修改占位信息：将 HTML 中的“站点名称”和“https://你的域名.com”替换为你自己的实际信息。

• 按需启用：CSS 和 JS 中的每个模块都相互独立，你可以根据喜好删除不需要的段落，不会影响其他功能。

• 深色模式：CSS 中已对深色模式做了特殊处理（body.dark-theme 背景置空），请放心使用。

这样，CSS、JavaScript、HTML 就完全分开了，你可以分别复制到各自对应的设置栏中。如有其他问题，欢迎在评论区留言看到会回复的