子比主题美化教程(四)

投放地方:后台=>>主题设置=>>自定义代码=>>自定义 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 帧结束

添加路径:在后台=>>外观=>>小工具=>>自定义 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);
}

代码很简单,CSS放到自定义CSS即可

.navbar-top .sub-menu,.theme-popover{background:linear-gradient(135deg,#ffffffb0 35%,#ffffffb0 100%);backdrop-filter:saturate(5) blur(20px)}

不多说直接放自定义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)}}

这个一共需要两个代码,跟着我步骤走,一个是JS引入的文件代码,一个是JS代码,JS代码是cf引入的,可能比较卡,毕竟是外网,可以自己保存本地引入!

JS引入0JS代码

这个是JS链接引入,直接将下面的代码放到:子比主题->>自定义头部HTML代码即可

<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

代码部署

将下面的代码放到你喜欢的位置即可,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>

免费和付费是一起改,一行CSS代码即可解决,将下面的代码放到:子比主题–>>自定义CSS样式即可,如果有自己喜欢的颜色可以去找颜色代码替换!!

.meta-pay.but.jb-yellow {--this-bg: linear-gradient(43deg, #ff6ac34a 0%, #82e1ff 46%, #ff6ac34a 100%);}

定位:页面&显示–>>底部页脚–>>版块二,直接替换就行可以了!

<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、子比主题最近评论小工具边框样式

用这个功能必须是要用子比自带的小工具:Zibll 最近评论,将下面的代码放到:子比主题–>>自定义CSS样式

/*子比主题最近评论小工具边框样式*/
.comment-mini-lists>div.posts-mini {
    border: 1px dashed #999999;
    border-radius: 10px;
    margin-top: 10px;
}

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容