美化说明:
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题,请一定要测试后在进行美化。
主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题,请一定要测试后在进行美化。
主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
必要说明:(核心重点)
↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
CSS 代码添加到后台:子比主题设置–>>自定义代码–>>自定义 CSS 样式
JS 即 javascript 代码添加到:后台子比主题设置–>>自定义代码–>>自定义 javascript 代码
没有特殊说明的小工具,自定义 HTML 小工具:添加网站后台–>>外观–>>小工具–>>点击【自定义 HTML】 选择放置的位置—>把代码复制进去,保存即可。
↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
CSS 代码添加到后台:
JS 即 javascript 代码添加到:
没有特殊说明的小工具,自定义 HTML 小工具:
↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
1、网站左上角添加 FPS 帧率显示
代码放到:
// FPS 帧开始
$('body').before('');
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();
})();
// FPS 帧结束
代码放到:
.figure{
width: 15px;
animation:0ms;
-webkit-animation:rotateImg 3s linear infinite;
vertical-align: middle;
}
@keyframes rotateImg {
0% {transform : rotate(0deg);}
100% {transform : rotate(360deg);}
}
@-webkit-keyframes rotateImg {
0%{-webkit-transform : rotate(0deg);}
100%{-webkit-transform : rotate(360deg);}
}
3、子比主题文章标签美化
将下面的代码放到:
.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}
4、子比开通会员和联系站长常用代码
开通会员:两款
<a class="float-btn pay-vip" vip-level="1" data-toggle="tooltip" data-placement="top" href="javascript:;" data-original-title="开通会员">
<a class="pay-vip" href="javascript:;">
联系站长:
<a href="javascript:;" data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1" data-class="modal-mini" data-toggle="RefreshModal" title="联系我们">联系我们</a></div>
积分购买:
<a data-class="modal-mini full-sm" data-height="330" data-remote="/wp-admin/admin-ajax.php?action=points_pay_modal" href=";" data-toggle="RefreshModal"><span style="color:red">积分不够?点我 快速购买积分</span></a>
5、页脚字体居中
将下面的代码放到:
<style type="text/css" id="wp-custom-css">
.icon {
width: 1em;
: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.footer .list-inline {
text-align: center;
}
</style>
6、LOGO扫光效果
将下面的代码放到:
/* 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 扫光结束 */
7、侧边滚动条美化
一共有两款侧边滚动条美化,
第一款:单色
/*滚动条显示样式*/
::-webkit-scrollbar-thumb{
background-color:#FF6666; /*更改喜欢的十六进制颜色*/
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*滚动条大小*/
::-webkit-scrollbar{
width:8px;
height:8px;
}
/*滚动框背景样式*/
::-webkit-scrollbar-track-piece{
background-color:#fff;
-webkit-border-radius:0;
}
第二款:彩色
/**彩色滚动条样式*/
::-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;
}
8、导航栏字体加粗
/*导航栏字体加粗开始*/
ul.nav {font-weight: 700;}
/*导航栏字体加粗结束*/
⚠️
温馨提示:部分资源来源互联网搬运,330B模板网不能全部测试,遇到源码有授权加密以及后门,请放弃使用,本站不会添加任何后门。请勿相信源码里的广告QQ以及其他联系方式,以免被骗!
© 版权声明
1.本站代码模板仅供学习交流使用,商用请支持正版!2.源码下载后请在24小时内删除,严禁从事违法、侵权等任何非法活动,否则法律后果自负!
THE END











暂无评论内容