前言
本文章只是个人无聊时的对Qzdy主题美化记录集合，同时也是本人的备忘录。若您觉得可以的话就拿去贵站使用吧，我会不定期更新一些美化教程等等。
主题美化说明
主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后在进行美化。
主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
我这里主要使用主题版本是5.2版本(版本不同或许稍有差异，自行甄别)
主题美化合集
Qzdy主题字体更换
动态设置美化标题
Qzdy主题导航栏文字加粗及换颜色
使用教程（具体看本站动态标题）在后台主题设置—>添加代码—>自定义样式css代码
把下面的代码添加到里面即可实现。
<style>
/*导航栏字体加粗 以及更换颜色*/
.layui-nav *{
color:#4e5358;
font-weight: 700;!important
}
</style>标题内容
QZDY主题logo扫光效果
将下面代码复制到css里面就行啦
/* logo扫光 */
.logo1,.logo{
position:relative;
overflow:hidden;
margin: 0px 0 0 0px;
}
.logo1:before,.logo: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;}
}
网站添加侧边彩色滚动条
一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦！
如果主题没有 自定义代码 那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！
彩色滚动条代码 CSS：
/**彩色滚动条样式开始*/
::-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;
}
/**彩色滚动条样式结束*/QZDY主题首页文章列表悬停上浮美化
CSS代码：
/*首页文章列表悬停上浮开始*/
.list-card:not(article):hover{opacity: 1;z-index: 1;border-radius: 10px;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);}
}
/*首页文章列表悬停上浮结束*/
- THE END -
最后修改：2023年4月24日
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://www.yun89.cn/24.html
q
强 😯