前言
本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。
注意说明
- 每个人的审美观念不一样，所以请先参考本站或测试在用的美化。
- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后再进行美化。
- 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
- 子比主题美化都是阿呆自己鼓捣、测试后才发布的，完全免费，开放。
教程即说明
- （最新版）CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式
- （最新版）JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码
- （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。
- 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。
1.logo扫光
CSS代码：后台子比主题设置->自定义代码->自定义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扫光结束*/2.文章标签美化
CSS代码：后台子比主题设置->自定义代码->自定义CSS样式
/*文章随机彩色标签开始*/
.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}
/*文章随机彩色标签结束*/3.侧边彩色滚动条
彩色滚动条样式
/**彩色滚动条样式*/
::-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;
}4.头像呼吸光环+鼠标悬停旋转放大
CSS代码：后台子比主题设置->自定义代码->自定义CSS样式
呼吸光环
.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;}}5.更换整站默认字体
网站后台->Zibll主题设置->全局&功能->自定义代码->自定义CSS样式
请注意修改下方“字体链接”为你的实际字体存放目录链接。
/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}*{font-family: "lovely"}
/*自定义网站字体结束*/字体推荐
6.修改网站鼠标样式
7.子比主题美化禁用F12、禁用Ctrl+S、禁用Ctrl+U、禁用Ctrl+Shift+I、右键菜单、复制成功&失败提醒弹窗
喜欢就支持一下吧
![表情[xieyanxiao]-阿呆日记](https://daixm.daixb.top/wp-content/themes/zibll/img/smilies/xieyanxiao.gif)
![表情[weixiao]-阿呆日记](https://daixm.daixb.top/wp-content/themes/zibll/img/smilies/weixiao.gif)
![表情[wunai]-阿呆日记](https://daixm.daixb.top/wp-content/themes/zibll/img/smilies/wunai.gif)
暂无评论内容