.jpg?imageSlim)
31、网站左上角添加 FPS 帧率显示
投放地方:后台=>>主题设置=>>自定义代码=>>自定义 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();
})();
// FPS 帧结束
32、网站底部添加 CTRL+D 收藏按钮
添加路径:在后台=>>外观=>>小工具=>>自定义 HTML=>>选择你需要放的位置
<!---CTRL+D 收藏小工具开始--->
<style type="text/css">
#go-fav {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background: #3d3d3d;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1)
}
#go-fav span {
padding: 5px 10px;
background: rgba(255, 197, 0, 1);
border-radius: 5px;
color: #202020;
margin: 0 5px
}
#go-fav a {
color: #aeaeae
}
#go-fav a:hover {
color: var(--focus-color)
}
</style>
<div id="go-fav"> 赶紧收藏我们,查看更多心仪的内容?按<span>Ctrl</span>+<span>D</span>收藏我们 或<a class="find-more" href="/" rel="nofollow noopener" target="_blank"> 发现更多</a></div>
<!---CTRL+D 收藏小工具结束--->
33、子比主题下拉搜索框添加背景
将下面的代码放到:子比主题->>自定义CSS样式
.navbar-search.show {
background-image: url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01M9YhgY1QbIhzAZH6W_!!2210123621994.png);
}
34、子比主题下拉菜单毛玻璃样式
代码很简单,CSS放到自定义CSS即可
.navbar-top .sub-menu,.theme-popover{background:linear-gradient(135deg,#ffffffb0 35%,#ffffffb0 100%);backdrop-filter:saturate(5) blur(20px)}
35、子比主题文章列表果冻弹跳效果
不多说直接放自定义CSS即可
posts.posts-item.card.ajax-item:hover{-webkit-animation:jumps-data-v-6bdef187 1.2s ease 1;animation:jumps-data-v-6bdef187 1.2s ease 1;}@-webkit-keyframes jumps-data-v-6bdef187{0%{transform:translate(0)}10%{transform:translateY(5px) scaleX(1.2) scaleY(.8)}30%{transform:translateY(-13px) scaleX(1) scaleY(1) rotate(5deg)}50%{transform:translateY(0) scale(1) rotate(0)}55%{transform:translateY(0) scaleX(1.1) scaleY(.9) rotate(0)}70%{transform:translateY(-4px) scaleX(1) scaleY(1) rotate(-2deg)}80%{transform:translateY(0) scaleX(1) scaleY(1) rotate(0)}85%{transform:translateY(0) scaleX(1.05) scaleY(.95) rotate(0)}to{transform:translateY(0) scaleX(1) scaleY(1)}}@keyframes jumps-data-v-6bdef187{0%{transform:translate(0)}10%{transform:translateY(5px) scaleX(1.2) scaleY(.8)}30%{transform:translateY(-13px) scaleX(1) scaleY(1) rotate(5deg)}50%{transform:translateY(0) scale(1) rotate(0)}55%{transform:translateY(0) scaleX(1.1) scaleY(.9) rotate(0)}70%{transform:translateY(-4px) scaleX(1) scaleY(1) rotate(-2deg)}80%{transform:translateY(0) scaleX(1) scaleY(1) rotate(0)}85%{transform:translateY(0) scaleX(1.05) scaleY(.95) rotate(0)}to{transform:translateY(0) scaleX(1) scaleY(1)}}
37、子比主题背景穿梭文字
样式代码
样式代码
代码部署
将下面的代码放到你喜欢的位置即可,WordPress可以放到:外观–>>小工具–>>自定义HTML即可!
<div class="tfbk_gdz"><p><span>TFBKW.COM</span></p></div>
<style>
.tfbk_gdz p span {
font-size: 26px;
letter-spacing: 0;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgb(255 255 255 / 50%);
background: url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN012KU4kP1QbIqA8O4NT_!!2210123621994.png) repeat-y;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
@-webkit-keyframes aitf {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
@keyframes aitf {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
</style>
38、子比主题免费/付费资源背景样式
免费和付费是一起改,一行CSS代码即可解决,将下面的代码放到:子比主题–>>自定义CSS样式即可,如果有自己喜欢的颜色可以去找颜色代码替换!!
.meta-pay.but.jb-yellow {--this-bg: linear-gradient(43deg, #ff6ac34a 0%, #82e1ff 46%, #ff6ac34a 100%);}
39、子比主题页脚底部按钮样式
.jpg?imageSlim)
定位:页面&显示–>>底部页脚–>>版块二,直接替换就行可以了!
<div class="github-badge">
<span class="badge-subject bg-blue">
<a href="/" target="_blank">友链申请</a>
</span>
<span class="badge-subject bg-brightgreen">
<a href="/" target="_blank">免责声明</a>
</span>
<span class="badge-subject bg-orange">
<a href="/" target="_blank">用户协议</a>
</span>
<span class="badge-subject bg-blueviolet">
<a href="/" target="_blank">隐私声明</a>
</span>
</div>
<style>
.github-badge {
text-align: center;
margin-bottom: 5px;
}
.badge-subject {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
list-style: none;
box-sizing: border-box;
outline: 0 !important;
font-family: "lovely", sans-serif;
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
margin-right: 8px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.badge-subject:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.bg-blue {
background-color: #007bff;
}
.bg-brightgreen {
background-color: #28a745;
}
.bg-orange {
background-color: #fd7e14;
}
.bg-blueviolet {
background-color: #6f42c1;
}
.badge-subject a {
color: #fff !important;
text-decoration: none;
display: block;
width: 100%;
height: 100%;
}
.badge-subject a:hover {
color: #fff !important;
}
</style>
40、子比主题最近评论小工具边框样式
.jpg?imageSlim)
用这个功能必须是要用子比自带的小工具:Zibll 最近评论,将下面的代码放到:子比主题–>>自定义CSS样式
/*子比主题最近评论小工具边框样式*/
.comment-mini-lists>div.posts-mini {
border: 1px dashed #999999;
border-radius: 10px;
margin-top: 10px;
}
© 版权声明
THE END







.jpg?imageSlim)


![表情[xieyanxiao]-小白书博客](https://www.studyinfo.cn/wp-content/themes/zibll/img/smilies/xieyanxiao.gif)

暂无评论内容