使用方法

只需在主题设置自定义CSS代码里面添加美化的css代码即可！ 如果主题没有 自定义代码 那么在WordPress主题目录文件里找style.css文件或者在WordPress后台里找“外观—>自定义—>额外CSS”里面美化的css代码即可！

滚动条样式代码CSS：

 ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 0.125rem;
    -moz-border-radius: 0.125rem;
    -webkit-border-radius: 0.125rem;
    background-color: #ccc;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

自定义代码CSS

/*头像呼吸光环和鼠标悬停旋转放大开始*/
.avatar{border-radius:50%; animation:light 4s ease-in-out infinite;transition:0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}
/*头像呼吸光环和鼠标悬停旋转放大结束*/

自定义代码CSS

第一种

/*首页文章列表悬停上浮开始*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.2s;}.tab-content .posts-item:not(article):hover{transform: translateY(-5px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*首页文章列表悬停上浮结束*/

第二种

/*首页文章列表悬停上浮开始*/
/*@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.2s;}.tab-content .posts-item:not(article):hover{transform: translateY(-5px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}*/
.tab-content .posts-item:not(article):hover{opacity: 1;z-index: 99;border-radius: 20px;transform: translateY(-5px);box-shadow: 0 3px 20px rgba(0, 0, 0, .25);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);}
}
/*首页文章列表悬停上浮结束*/

自定义代码CSS

//网站动态标题开始 
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
    if (document.hidden) {
        document.title = "【新消息】你有一条未读消息";
        clearTimeout(titleTime)
    } else {
        titleTime = setTimeout(function() {
            document.title = OriginTitile
        },
        100)
    }
});
//网站动态标题结束

因为字体是在本站的，如果需要的话可以点我下载，把字体下载放到根目录，把 www.ffsir.com 修改成你的主站链接即可。

自定义代码CSS

/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("https://www.ffsir.com/msi/font/WebFont.woff2") format("woff2");font-display: swap;}
*{font-family: "lovely"}
/*自定义网站字体结束*/

因为鼠标样式是在本站的，如果需要的话可以打开下载指针样式和下载指针悬停链接把样式下载，在wp-content/uploads里新建一个mouse的文件夹把两个文件放进去，把 www.ffsir.com 修改成你的主站链接即可。

自定义代码CSS

/** 普通指针样式**/ 
body{cursor: url(https://www.ffsir.com/msi/mouse/normal.cur), default;}
/** 链接指针样式**/ 
a:hover,.cursor:hover,button:hover,svg:hover{cursor:url(https://www.ffsir.com/msi/mouse/link.cur), pointer;}
/** 鼠标样式 结束**/

子比主题设置—>自定义代码—>自定义javascript代码：,添加以下代码：

//透明复制提示
document.body.oncopy = function() {layer.msg('<p style="font-weight: 700;">【猫叔栈(www.ffsir.com)】<br>复制成功，若要转载请务必保留原文链接！</p>', function(){});}

子比主题设置—>自定义代码—>自定义底部HTML代码,添加以下代码：

<!--透明复制提示开始--> 
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!--透明复制提示结束--> 

后台设置—>外观—>小工具—>添加自定义HTML代码,加到合适侧边栏即可

<div id="he-plugin-standard"></div>
<script>
WIDGET = {
  "CONFIG": {
    "layout": "2",
    "width": "285",
    "height": "300",
    "background": "1",
    "dataColor": "FFFFFF",
    "borderRadius": "5",
    "key": "3180d3c43e524753ab8bcef69dba023a"
  }
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

效果演示

添加方法： 后台设置—>外观—>小工具—>添加Zibll 链接列表(新版),加到标题右侧按钮即可

<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链

效果演示