前言

本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。

美化说明：

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

美化教程（集合）

说明：（重要）

一些老教程随机顺序，新教程排在最后，越往后越新。
↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
（最新版）CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式
（最新版）JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码
（最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。
↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑
其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。
有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

温馨提示：你们在各大站上看到的子比主题美化，可以说我这都有，所有各位就直接一个个看就好啦

1、网站左上角添加 FPS 帧率显示

使用方法

你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

自定义 javascript 代码：

// FPS 帧开始
// by：changxiangcloud.cn
$('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();
})();
// by：changxiangcloud.cn
// FPS 帧结束

2、文章标签美化

使用方法

复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里，即可大功告成。

自定义 CSS 代码：

/*文章随机彩色标签开始*/
/*by：changxiangcloud.cn/
.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}
/*by：changxiangcloud.cn*/
/*文章随机彩色标签结束*/

3、用户头像呼吸光环+鼠标悬停旋转放大

自定义 CSS 代码：

/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：changxiangcloud.cn*/
.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;}}
/*by：changxiangcloud.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/

4、网站添加添加居中复制透明提示框

1.子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
// by：三岁笔记-li1yu.cn
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【三岁笔记(li1yu.cn)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});};

2.子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<!--by：三岁笔记-li1yu.cn-->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束-->

5、网站侧边栏添加一款好看的粒子当前时间

1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 ：我是添加在首页侧边栏

标题文本：☀当前时间

<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>

6、文章页底部添加【感谢您的来访，获取更多精彩文章请收藏本站+图片。】

1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容，把下面的 php 代码复制粘贴到里面即可。

2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行

3、代码中的图片我托管在 jsdelivr+github，可直接引用，部分的文字可修改成自己的

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

7、子比主题申请友链按钮+首页最新发布动态风车按钮美化

1、首先在子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加以下代码

<!--三岁笔记阿里图标库--> 
<script src="//at.alicdn.com/t/font_2820512_sco5ucv703.js"></script>
<!--三岁笔记阿里图标库-->

2、在后台—》外观—》小工具—》 Zibll 链接列表(新版) —》选择你需要放的位置社长是放在首页-底部全宽度
3、然后在下图的 —》标题右侧按钮文案这里添加以下代码，注意要勾选上（显示框架盒子）

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

首页最新发布风车动态图标代码及放置路径：

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

------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明 1、本网站名称：畅享云博客
2、本站永久网址：https://changxiangcloud.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ7027289进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END