前端美化主要基于自定义css。大概流程为：浏览器 f12 打开控制台，源代码里搜索找到要修改的元素对应的类名，在WordPress主页外观里的自定义css中指定类名以及样式即可

在此主要记录本站用到的一些修改

文章卡片

.card {
	color: #333333 !important;   /* 文本颜色 */
        background: rgba(255, 235, 255, 0.75) !important;/* 背景，前三元素指定颜色，后面是透明度 */
	backdrop-filter: blur(18px) saturate(200%);/* blur（）是毛玻璃模糊程度，saturate是饱和度 */
        -webkit-backdrop-filter: blur(18px) saturate(200%);/* 适配ios */
}

文字流光渐变

/* 生成渐变背景 + 背景裁剪到文字 + 无限循环动画*/

/* 定义背景的移动*/
@keyframes ColdLight {
  0% {
    background-position: 0%;     /*起始位置 */
  }
  100% {
    background-position: 200%;   /*结束位置*/
  }
}

.banner-title {
  position: absolute;
  /* 背景图生成，从左到右循环渐变 */
  background: linear-gradient(90deg,   /* 90deg = 从左到右 */
    #03a9f4,  /* 蓝色*/
    #f441a5,  /* 粉红色 */
    #ffeb3b,  /* 黄色 */
    #03a9f4   /* 蓝色*/
  );
  
  background-size: 200%;          /* 背景宽度设为200%，为动画移动留出空间 */
  animation: ColdLight 3s linear infinite;  /* 匀速运动，3s循环 */
  
  color: transparent !important;   /* 文字设为透明 */
  -webkit-background-clip: text;   /* 背景裁剪*/
  
  font-size: 64px;                 /* 字体大小 */
  font-weight: bold;               /* 加粗 */
}

头像旋转

/* 头像圆形黑框样式 */
.navbar-icon img {
  border: 3px solid #000;      /* 黑色边框 */
  border-radius: 50%;         /* 圆形关键属性 */
  padding: 2px;               /* 边框与图片间距 */
  object-fit: cover;          /* 保持图片比例 */
  display: block;             /* 消除img默认间隙 */
  width: 60px !important;     /* 自定义尺寸 */
  height: 60px !important;    /* 需与width相等 */
}

/* 悬停动画：正转 → 减速停止 → 反转 → 循环 */
.navbar-icon:hover img {
  border-color: #666;         /* 悬停变灰色 */
  animation: rotateSwing 3s ease-in-out infinite;  /* 3秒一个周期，缓动曲线 */
}

/* 定义正转+反转的摆动动画 */
@keyframes rotateSwing {
  0% {
    transform: rotate(0deg);           /* 起始：0度 */
  }
  30% {
    transform: rotate(720deg);         /* 0.9秒：正转到180度（由慢到快再变慢，得益于ease-in-out） */
  }
  50% {
    transform: rotate(720deg);         /* 1.5秒：停顿一下（在180度停留0.6秒） */
  }
  80% {
    transform: rotate(0deg);           /* 2.4秒：反向转回0度（同样由慢到快再变慢） */
  }
  100% {
    transform: rotate(0deg);           /* 3秒：停在0度，等待下一次循环 */
  }
}

字体

可以在字体天下下载字体，存到服务器里调用，我这里是在网站所在目录新建了一个data文件夹放里面

@font-face{ 
font-family:btfFont; 
src: url(https://hhh3m.top/data/wenyuanm.woff2) format('woff2') 
} 
 
body{ 
font-family:"btfFont"
}

移动端菜单

手机左上角菜单和电脑不一样，一打开全是白的看不到文字，同样替换一下背景改为透明，重点是只影响手机不影响电脑

/*通过宽度来判断是否移动端*/
@media (max-width: 992px) {
    .leftbar {
        background-color: rgba(255, 255, 255, 0) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}