WordPress子比主题美化教程[持续更新]

使用方法

• 你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。

自定义 javascript 代码：

// FPS帧
$('body').before('<div id="fps" style="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){ 
        $('#fps').html(fps+'FPS');
    };
    step();
})();

效果图：

自定义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 扫光结束 */

自定义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;
}
}

自定义CSS代码：

/*导航栏字体加粗*/
ul.nav {font-weight: 700;}

自定义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
}

自定义CSS代码：

/*首页文章列表鼠标悬停上浮效果开始*/
@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);
}
}/*首页文章列表悬停上浮效果结束*/

自定义CSS代码：

/*文章外框发光*/
.article.main-bg.main-shadow {
	border-radius:var(--main-radius);
	box-shadow:1px 1px 3px 3px rgba(255,112,173,.35);
	-moz-box-shadow:1px 1px 3px 3px rgba(255,112,173,.35)
}
.article.main-bg.main-shadow:hover {
	box-shadow:1px 1px 5px 5px rgba(255,112,173,.35);
	-moz-box-shadow:1px 1px 5px 5px rgba(255,112,173,.35)
}

自定义CSS代码：

/*鼠标移动图片外发光*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}