前言
本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。
美化说明：
- 每个人的审美观念不一样，所以请先参考本站或测试在用。
- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。
- 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
- 子比主题美化都是我自己鼓捣、测试后才分布的，完全免费，开放。
- 嗯…暂时想到这些，以后想到在加。
美化教程（集合）
说明：（重要）
一些老教程随机顺序，新教程排在最后，越往后越新。 ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓ （最新版）CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式 （最新版）JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码 （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。 ↑↑↑↑↑↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑↑↑↑↑ 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我可能不重复告知了，请注意看上面的方法。 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面 。
温馨提示：你们在各大站上看到的子比主题美化，可以说我这都有，所有各位就直接一个个看就好啦
使用方法
你只需在网站管理后台—》主题设置—》自定义代码—》自定义 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 帧结束使用方法
复制 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*/
/*文章随机彩色标签结束*/自定义 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*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/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>
<!--透明复制提示结束--> 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>1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。
2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行
3、代码中的图片我托管在 jsdelivr+github，可直接引用，部分的文字可修改成自己的
![图片[1]-子比主题美化-畅享云博客](https://changxiangcloud.cn/3.gif)
1、首先在子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加以下代码
<!--三岁笔记阿里图标库-->
<script src="//at.alicdn.com/t/font_2820512_sco5ucv703.js"></script>
<!--三岁笔记阿里图标库--> - 2、在后台—》外观—》小工具—》 Zibll 链接列表(新版) —》 选择你需要放的位置社长是放在 首页-底部全宽度
- 3、然后在下图的 —》标题右侧按钮文案 这里添加以下代码，注意要勾选上（显示框架盒子）
首页最新发布风车动态图标代码及放置路径：
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容