正文开始阅读，请点击右上角“关注”按钮，关注我们
前言
本文章只是个人无聊时的对子比主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期（主要是想不到好的美化了）更新一些美化教程、好玩的小工具、页面等等。
主题美化说明
- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。
- 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
必要说明（核心重点）
CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式
JS即javascript代码添加到后台子比主题设置—>自定义代码—>自定义javascript代码
小工具，自定义HTML小工具添加网站后台—>外观–>小工具–>点击【自定义HTML】选择放置的位置—>把代码复制进去，保存即可。
美化合集
1、加个导航卡片小工具
我就整理出来吧，我只在手机端显示出来
pc端我觉得不太好看就给隐藏小工具了
效果是下面这样
代码食用
<link rel='stylesheet' id='ding-css' href='https://001.pipixiaozhan.cn/css/2022-12-01.css' type='text/css' media='all' />
<div class="section">
<div class="home-first">
<div class="container hide_sm">
<div class="col-1-4">
<div class="hf-widget hf-widget-1 hf-widget-software">
<h3 class="hf-widget-title">
<i class="fa fa-cloud"></i>
<a href="#">精彩或许就在眼前</a>
<span>懂你的小站</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<a href="https://域名/" rel="external nofollow" target="_blank">
<i class="thumb " style="background-image:url(这里加你的图片图标链接)"></i>
<span>web前端学习</span></a>
</li>
<li>
<a href="https://域名/" target="_blank">
<i class="thumb " style="background-image:url(这里加你的图片图标链接)"></i>
<span>教程分享</span></a>
</li>
<li>
<a href="https://域名/" target="_blank">
<i class="thumb " style="background-image:url(这里加你的图片图标链接)"></i>
<span>软文分享</span></a>
</li>
<li>
<a href="https://域名/" target="_blank">
<i class="thumb " style="background-image:url(这里加你的图片图标链接)"></i>
<span>情感电台</span></a>
</li>
</ul></div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-2">
<h3 class="hf-widget-title">
<i class="fa fa-tint"></i>
<a href="#">热门搜索</a>
<span>热门搜索关键字</span></h3>
<div class="hf-widget-content">
<div class="no-scroll hf-tags">
<a class="style_orange" href="https://域名/" target="_blank">
<span>Redis Object Cach</span></a>
<a class="" href="https://域名/" target="_blank">
<span>七彩粒子特效</span></a>
<a class="" href="https://域名/" target="_blank">
<span>秒看青年大学习</span></a>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-1 hf-widget-hot-cats">
<h3 class="hf-widget-title">
<i class="fa fa-dropbox"></i>
<a href="#">应用专区</a>
<span>推荐精品应用</span></h3>
<div class="hf-widget-content">
<div class="icon-b">
<ul>
<li>
<a href="https://域名/" target="_blank">
<i class="fa fa-windows"></i>
<span>Windows</span></a>
</li>
<li>
<a href="https://域名/" target="_blank">
<i class="fa fa-android"></i>
<span>Android</span></a>
</li>
<li>
<a href="https://域名/" target="_blank">
<i class="fa fa-apple"></i>
<span>Mac</span></a>
</li>
<li>
<a href="https://域名/" target="_blank">
<i class="fa fa-linux"></i>
<span>Linux</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-1-4 sxweb">
<div class="hf-widget hf-widget-4">
<h3 class="hf-widget-title">
<i class="fa fa-book"></i>
<a href="#">官方推荐</a>
<span>开通会员享精品内容</span>
</h3>
<div class="hf-widget-content">
<div class="scroll-h">
<ul>
<li>
<h3>
<a class="pay-vip" href="javascript:;" style="overflow: hidden; position: relative;" vip-level="1">
<i class="icon-time"></i>
<span>IP限时59元起</span>
<em>立即开通</em></a>
</h3>
</li>
<li>
<h3>
<a class="pay-vip" href="javascript:;" style="overflow: hidden; position: relative;" vip-level="2">
<i class="icon-time"></i>
<span>SVIP限时99元起</span>
<em>立即开通</em></a>
</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>2、网站左上角添加 FPS 帧率显示
使用方法
你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。
自定义 javascript 代码：
// FPS 帧开始
// BY-映凡空间-www.yfkj6.com
$('body').before('<div id="fps" style="font-size:16px !important;z-index:10000;position:fixed;top:3;left:3;font-weight:bold;background-image: linear-gradient( 120deg, #f093fb 0%, #f5576c 100%);-webkit-background-clip: text;color: transparent;"></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-映凡空间-www.yfkj6.com
// FPS 帧结束![图片[1]-主题美化合集，【子比主题zill美化教程(备忘录)】欢迎查看！！！](https://001.pipixiaozhan.cn/2022/06/20220815033442471.png)
3、zibll 子比主题文章标签美化
使用方法
复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里，即可大功告成。
自定义 CSS 代码：
/*文章随机彩色标签开始*/
/*BY：映凡空间-www.yfkj6.com*/
.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：映凡空间-www.yfkj6.com*/
/*文章随机彩色标签结束*/4、网站添加侧边彩色滚动条
使用方法
一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦！如果主题没有 自定义代码 那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！
彩色滚动条代码 CSS：
/**彩色滚动条样式开始*/
/*BY：映凡空间-www.yfkj6.com*/
::-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;
}
/*BY：映凡空间-www.yfkj6.com*/
/**彩色滚动条样式结束*/5、主题 LOGO 扫光
CSS 代码：
/* logo 扫光开始 */
/*BY：映凡空间-www.yfkj6.com*/
.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;}}
/* BY：映凡空间-www.yfkj6.com*/
/* logo 扫光结束 */6、导航栏标题字体加粗
添加到自定 CSS 代码：
/*导航栏字体加粗开始*/
/*BY：映凡空间-www.yfkj6.com*/
ul.nav {font-weight: 700;}
/*BY：映凡空间-www.yfkj6.com*/
/*导航栏字体加粗结束*/7、用户头像呼吸光环+鼠标悬停旋转放大
自定义 CSS 代码：
/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*BY：映凡空间-www.yfkj6.com*/
.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：映凡空间-www.yfkj6.com*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/8、首页文章列表悬停上浮开始
自定义 CSS 代码：
/*首页文章列表悬停上浮开始*/
/*BY：映凡空间-www.yfkj6.com*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*BY：映凡空间-www.yfkj6.com*/
/*首页文章列表悬停上浮结束*/更优雅的悬浮
/*首页文章列表悬停上浮开始*/
/*BY：映凡空间-www.yfkj6.com*/
.tab-content .posts-item:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 5px 5px rgba(255, 41, 105, 0.2);animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;}
@keyframes index-link-active {
0%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);}
16%{transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);}
100%{transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);}
}
/*BY：映凡空间-www.yfkj6.com*/
/*首页文章列表悬停上浮结束*/9、网站动态标题
![WordPress设置网站动态标题[WP教程]-映凡空间](https://ram.1457vip.com/yfkj6/2022/05/20220605080923493-700x467.jpg)
10、WP 主题侧边栏滚动播报小工具
![WordPress侧边栏添加滚动播报小工具两种样式[WP小工具]-映凡空间](https://ram.1457vip.com/yfkj6/2022/05/20220605084316300-700x467.jpg)
感谢您的来访，获取更多精彩文章请收藏本站。
Invitation
YingFan
-scan
created:2022/05/10
Nice to meet you！
Use this card to join the YingFan's Space and participate in a pleasant discussion together .
Welcome to YingFan's Space,wish you a nice day .
© 版权声明
THE END
![【子比主题美化】子比主题扩展组件[免安装插件]-映凡空间](https://ram.1457vip.com/yfkj6/2022/08/20220907155431502.jpg)
- 最新
- 最热
只看作者