详情
评论
问答

子比主题美化教程合集（已更新 2025-6-01）

94367
NEWMOON- cospaly,写真美图站
立即前往

前言

本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。

注意说明

  • 每个人的审美观念不一样，所以请先参考本站或测试在用的美化。
  • 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后再进行美化。
  • 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
  • 子比主题美化都是阿呆自己鼓捣、测试后才发布的，完全免费，开放。

教程即说明

  1. （最新版）CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式
  2. （最新版）JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码
  3. （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。
  4. 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

/* logo扫光开始*/
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/* logo扫光结束*/

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

/*文章随机彩色标签开始*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;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}
/*文章随机彩色标签结束*/

彩色滚动条样式

/**彩色滚动条样式*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}

CSS代码：后台子比主题设置->自定义代码->自定义CSS样式

呼吸光环

.avatar {border-radius: 50%;animation: light 4s ease-in-out infinite;transition: 0.5s;}

悬停旋转放大

.avatar:hover {transform: scale(1.15) rotate(720deg);}@keyframes light {0% {box-shadow: 0 0 4px #f00;}25% {box-shadow: 0 0 16px #0f0;}50% {box-shadow: 0 0 4px #00f;}75% {box-shadow: 0 0 16px #0f0;}100% {box-shadow: 0 0 4px #f00;}}

网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式

请注意修改下方“字体链接”为你的实际字体存放目录链接。

/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}*{font-family: "lovely"}
/*自定义网站字体结束*/
字体推荐
下载
子比美化 – 网站鼠标样式美化-阿呆日记
子比美化 – 网站鼠标样式美化-阿呆日记
免费子比美化 – 网站鼠标样式美化
点击查看
子比美化禁用F12、禁用Ctrl+S、禁用Ctrl+U、禁用Ctrl+Shift+I、右键菜单、复制成功&失败提醒弹窗-阿呆日记
子比美化禁用F12、禁用Ctrl+S、禁用Ctrl+U、禁用Ctrl+Shift+I、右键菜单、复制成功&失败提醒弹窗-阿呆日记
免费子比美化禁用F12、禁用Ctrl+S、禁用Ctrl+U、禁用Ctrl+Shift+I、右键菜单、复制成功&失败提醒弹窗
点击查看

教程

在自己网站主题的CSS中加入以下代码：

.fa-spin {
    animation: 2s linear 0s normal none infinite running fa-spin;
}

在Wordpress后台，将“fa-spin”添加到菜单中要旋转的图标代码的“class”中。

<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#iconziyuan"></use></svg> 文章分类

使用教程：

1、后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面

自定义 CSS 代码：

/*左边联系站长 css 开始*/
.contact-help{position: fixed; z-index: 101; left: 0; top: calc(50% - 30px); margin-top: -36px; width: 28px; height: 72px; transition: all .3s; font-size: 12px;background: var(--main-bg-color);border-radius: 0 5px 5px 0; padding: 8px 7px; line-height: 14px;}@media screen and (max-width: 768px){.contact-help{display:none;}}
/*左边联系站长 css 开始*/

2、在主题目录下 themes/zibll/footer.php 下，添加下面的 PHP 代码：

PHP 代码：

<!--左侧联系站长-->
<a href="http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes" target="_blank" class="contact-help main-shadow"  style="font-weight:700;" />联系站长</a>

3、将第二步链接中的uin=12345678，替换下填写你自己的qq账号即可。

教程

只需在网站管理后台—主题设置—自定义代码—自定义javascript代码，把下面的js代码复制粘贴到里面即可。其他博客系统使用同理。

// FPS帧
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){ 
    var requestAnimationFrame =  
        window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame || 
        function(callback) { 
            window.setTimeout(callback, 1000/60); 
        }; 
    var e,pe,pid,fps,last,offset,step,appendFps; 
 
    fps = 0; 
    last = Date.now(); 
    step = function(){ 
        offset = Date.now() - last; 
        fps += 1; 
        if( offset >= 1000 ){ 
        last += offset; 
        appendFps(fps); 
        fps = 0; 
        } 
        requestAnimationFrame( step ); 
    }; 
    appendFps = function(fps){ 
        console.log(fps+'FPS');
        $('#fps').html(fps+'FPS');
    };
    step();
})();

在 后台—外观—小工具—首页-底部全宽度，自定义HTML 添加下面代码即可。(其他位置自行修改~)

<div id="wiiuii" style="box-shadow: 0 0 10px var(--main-shadow);">
<section class="buy-container">
  <div class="buy-box">
    <div class="slogan">
      <h3>博客</h3>
      <p>欢迎光临！</p>
    </div>
    <ul class="actions">
      <li>
        <a href="http://wpa.qq.com/msgrd?v=3&uin=QQ号&site=qq&menu=yes" target="_blank" class="buy-button primary" rel="noopener noreferrer">联系站长</a>
      </li>
      <li>
        <a href="/links" target="_blank" class="demo-button" rel="noopener noreferrer">友链通道</a>
      </li>
    </ul>
  </div>
  <span class="tips"><div id="go-fav">更多精彩文章，按<span>Ctrl</span>+<span>D</span>收藏本站！</div></span>
  </section>
  </div>
<style type="text/css">
.buy-container{color: #ccc; padding: 60px 40px 50px 40px;margin: 0 auto; background: rgb(224,32,140); /*下述两行代码为兼容浏览器用，建议同步修改，亦可删除（不建议）*/background: -moz-linear-gradient(left, rgb(160,32,240) 0%, rgb(0,191,255) 100%);background: -webkit-linear-gradient(left, rgb(160,32,240) 0%,rgb(0,191,255) 100%); /*请更改此行代码，颜色为rgb模式*/background: linear-gradient(to right, rgb(160,32,240) 0%, rgb(0,191,255) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0208c', endColorstr='#fa6400',GradientType=1 );/*-webkit-border-radius: 8px;-moz-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;*/border-radius: var(--main-radius);}.buy-container .buy-box{display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 900px; margin: 0 auto;}@media screen and (max-width: 700px){.buy-container .buy-box{display: block; text-align: center;}.buy-container .buy-box .slogan{margin-bottom: 30px;}}.buy-container .buy-box .slogan h3{color: #fff;font-size: 26px;margin: 0 0 10px 0;}@media screen and (max-width: 800px){.buy-container .buy-box .slogan h3{font-size: 24px;}}@media screen and (max-width: 500px){.buy-container .buy-box .slogan h3{font-size: 20px;}}@media screen and (max-width: 400px){.buy-container .buy-box .slogan h3{font-size: 18px;}}.buy-container .buy-box .slogan p{color: #fff;font-size: 14px;font-weight: bold;margin: 10px 0;}.buy-container .buy-box .actions{display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center;list-style-type: none;margin: 0;padding: 0;}@media screen and (max-width: 700px){.buy-container .buy-box .actions{-webkit-box-pack: justify; justify-content: center;}}.buy-container .buy-box .actions li{margin: 0;}.buy-container .buy-box .actions li:last-child{margin-left: 10px;}.buy-container .buy-box .actions li a{position: relative;color: #fff !important;font-size: 14px;font-weight: bold; line-height: 1;text-decoration: none;padding: 10px 20px;background-color: rgba(255, 255, 255, .1);-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-webkit-transition: .2s;-moz-transition: .2s;-o-transition: .2s;transition: .2s;}.buy-container .buy-box .actions li a:hover{-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px);-o-transform: translateY(-2px);transform: translateY(-2px); -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -moz-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); -o-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);opacity: 1 !important;}@media screen and (max-width: 330px){.buy-container .buy-box .actions li a{font-size: 12px;}}.buy-container .buy-box .actions li a:not(.primary):before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;-webkit-box-shadow: inset 0 0 0 1px currentColor;-moz-box-shadow: inset 0 0 0 1px currentColor;-o-box-shadow: inset 0 0 0 1px currentColor;box-shadow: inset 0 0 0 1px currentColor;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;-khtml-opacity: .3;-moz-opacity: .3;opacity: .3;}.buy-container .buy-box .actions li a:after{display: none;}.buy-container .buy-box .actions li a.primary{color: #ff3b30 !important;background-color: #fff;}.buy-container .tips{border-top: 1px solid rgba(255, 255, 255, .1);display: block;color: #fff;font-size: 12px;text-align: center; max-width: 900px;margin: 30px auto 0 auto;padding-top: 30px;}@media screen and (max-width: 768px){.buy-container {padding: 30px 40px 30px 40px;}}#go-fav{width:100%; height:100%; line-height:30px; text-align:center; font-size:14px; font-weight:700; color:rgba(255, 255, 255, 1);}#go-fav span{padding:5px 10px; background:#f0e7e2; border-radius:8px; color:#202020; margin:0 5px;}
</style>
<script>
document.getElementById("wiiuii").parentNode.parentNode.style.padding=0;
</script>
图片[1]-子比主题美化教程合集（已更新 2025-6-01）-阿呆日记
图片[2]-子比主题美化教程合集（已更新 2025-6-01）-阿呆日记

将下面的代码放到自定义CSS即可！

  此处内容已隐藏，请评论后刷新页面查看.

子比 主题设置–自定义代码–自定 CSS 代码，

把下面的 css 代码复制粘贴到里面即可，里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置

给网站添加一个鼠标放到文章上会有一个果冻弹跳的效果，主的看上去还是很好玩的，实现这个效果只需要一个CSS即可。

将下面代码放到主题设置里的自定义CSS即可

把代码添加到 footer.php 文件的之前

<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>
© 版权声明
文章来源
daixm.daixb.top
隐私政策
PrivacyPolicy
用户协议
UseGenerator
许可协议
NC-SA 4.0
THE END
子比美化教程合集子比美化
喜欢就支持一下吧
点赞7 分享
daixbu的头像-阿呆日记钻石会员
2025子比主题zibll-V8.1(含教程) | 子比主题8.1开心版过授权-阿呆日记
2025子比主题zibll-V8.1(含教程) | 子比主题8.1开心版过授权
2025子比主题zibll-V8.1(含教程) | 子比主题8.1开心版过授权
49天前 468
导航栏按钮样式-阿呆日记
导航栏按钮样式
导航栏按钮样式
22天前 159
子比主题 – 动态背景符号元素效果-阿呆日记
子比主题 – 动态背景符号元素效果
子比主题 – 动态背景符号元素效果
3个月前 148
子比美化-思幻音乐播放器代码版-阿呆日记
子比美化-思幻音乐播放器代码版
子比美化-思幻音乐播放器代码版
28天前 145
子比主题-网站弹窗带倒计时-阿呆日记
子比主题-网站弹窗带倒计时
子比主题-网站弹窗带倒计时
39天前 138
子比美化-为您的网站添加网站底部美化代码-阿呆日记
子比美化-为您的网站添加网站底部美化代码
子比美化-为您的网站添加网站底部美化代码
46天前 130
相关推荐
子比主题美化教程合集（已更新 2025-6-01）-阿呆日记
子比主题美化教程合集（已更新 2025-6-01）
子比主题美化教程合集（已更新 2025-6-01）
52天前 436
导航栏按钮样式-阿呆日记
导航栏按钮样式
导航栏按钮样式
22天前 159
子比主题 – 动态背景符号元素效果-阿呆日记
子比主题 – 动态背景符号元素效果
子比主题 – 动态背景符号元素效果
3个月前 148
子比美化-思幻音乐播放器代码版-阿呆日记
子比美化-思幻音乐播放器代码版
子比美化-思幻音乐播放器代码版
28天前 145
子比主题-网站弹窗带倒计时-阿呆日记
子比主题-网站弹窗带倒计时
子比主题-网站弹窗带倒计时
39天前 138
子比美化-为您的网站添加网站底部美化代码-阿呆日记
子比美化-为您的网站添加网站底部美化代码
子比美化-为您的网站添加网站底部美化代码
46天前 130
评论 共9条

请登录后发表评论

    只看作者
    • a3326421747的头像-阿呆日记a3326421747等级-LV1-阿呆日记0
      拿走了，谢谢阿呆日记，一直在看阿呆日记的文章~
      5天前广东
      00119
    • dfiuafiaw的头像-阿呆日记dfiuafiaw等级-LV1-阿呆日记0
      MEILIN 等级-LV1-阿呆日记 0 您的文章总是让我感到非常有力量，阿呆日记，谢谢您。
      8天前江西
      00099
    • MEILIN的头像-阿呆日记MEILIN等级-LV1-阿呆日记0
      您的文章总是让我感到非常有力量，阿呆日记，谢谢您。
      11天前广东
      00105
    • 喵喵淼1的头像-阿呆日记喵喵淼1等级-LV1-阿呆日记0
      文章来自大自然的灵感，好喜欢这篇文章。
      12天前河北
      00100
    • mtlvip的头像-阿呆日记mtlvip等级-LV1-阿呆日记0
      谢谢分享，希望阿呆日记长长久久
      19天前山东
      00006
    • Qiongjing的头像-阿呆日记Qiongjing等级-LV1-阿呆日记0
      您的文章总是让我感到启发和鼓舞，阿呆日记，非常感谢您。
      21天前山西
      00065
    • daixbu的头像-阿呆日记钻石会员daixbu等级-LV6-阿呆日记 本文作者0
      学习到了，感谢阿呆日记表情[Array]-阿呆日记
      27天前香港
      00001
用户封面
daixbu的头像-阿呆日记钻石会员
百度一下-协助本站SEO
1234qazs的头像-阿呆日记

1234qazs21小时前0

学习到了，感谢阿呆日记
1234qazs的头像-阿呆日记

1234qazs22小时前0

您的文章非常有深度，阿呆日记，我一直在阅读并学习。
1234qazs的头像-阿呆日记

1234qazs22小时前0

真的很负责，谢谢阿呆日记
1234qazs的头像-阿呆日记

1234qazs22小时前0

您的文章非常有深度，阿呆日记，我一直在阅读并学习。
dfiuafiaw的头像-阿呆日记

dfiuafiaw前天0

1111
1234qazs的头像-阿呆日记

1234qazs2天前0

您的文章总是让我感到非常有动力和勇气，阿呆日记，谢谢您。
1234qazs的头像-阿呆日记

1234qazs2天前0

拿走了，谢谢阿呆日记，一直在看阿呆日记的文章~
1234qazs的头像-阿呆日记

1234qazs2天前0

jhvbb您的文章非常有深度，阿呆日记，我一直在阅读并学习。
标签云
鼠标美化高斯模糊显示页面页脚音乐播放器随机跳转门铃邮件通知跳动资源背景底色评论背景图评论框背景图评论文字API功能评论区美化评论角标蓝色边框扫动效果自动售卡自动发送背景

在线用户