前言
- 本页主题美化内容是觅知社长在建站时一个一个测试过无任何错误的记录合集,使用之前先参考本站,若觉得实用就拿去用吧,我会持续的更新。
美化说明:
- 每个人的审美观念不一样,所以请先参考本站或测试在用。
- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题,请一定要测试后在进行美化。
- 主题美化可能会对主题文件进行修改,更新时请及时备份主题美化的文件,或者收藏本站,以免一些主题页面或美化效果丢失。
- 子比主题美化都是社长自己鼓捣、测试后才分布的,完全免费,开放。
必要说明:(核心重点)
- ↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
- (最新版子比主题)CSS代码添加到后台:子比主题设置—>自定义代码—>自定义CSS样式
- (最新版子比主题)JS即javascript代码添加到:后台子比主题设置—>自定义代码—>自定义javascript代码
- (最新版子比主题)没有特殊说明的小工具,自定义HTML小工具:添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去,保存即可。
- ↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑
- 其他添加方式的,我会在教程里告知,若只需添加CSS+JS的教程,我可能不重复告知了,请注意看上面的方法。
- 有些美化教程本站已经发布的,本文章将不再进行编写教程,直接跳转到文章页面。
教程按是更新时间排序,新的美化教程排在最后面-页码越往后越新
1、网站左上角添加FPS帧率显示
使用方法
你只需在网站管理后台—》主题设置—》自定义代码—》自定义javascript代码,把下面的js代码复制粘贴到里面即可。
自定义javascript代码:
// 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();
})();
// FPS帧结束
2、主题LOGO扫光
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扫光结束 */
声明:本站内容原创部分,版权归吃瓜不打烊所有,转载请注明出处;非原创部分,搜集整理自微博/知乎/虎扑等站,版权归原作者所有。