其他参考文档：

十大前端常用特效-掘金

Argon主题美化 – 北冥红烧鱼的芥子空间 (hongshaoyv.com)

Argon主题博客美化 – Echo小窝(liveout.cn)不过博主已经换主题没用wordpress了

Docker系列 WordPress系列 特效 – Bensz (hwb0307.com)

除直接动源文件的修改外，一般前端美化主要基于自定义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;
    }
}

文章封面

主题设置里面可以设置文章第一张图为封面，也可以在文章编辑页右上角设置里设置封面（头图）

不过常规封面无模糊无遮罩，标题也是白色的很难看

设置模糊与遮罩，鼠标悬停则清晰，以及标题阴影增加可读性

依旧是f12找到封面对应的元素类名然后修改css：

.post-header-with-thumbnail .post-thumbnail {
    filter: blur(4px);
    transform: scale(1.06); /* 直接模糊会有白边，放大一点，把白边藏起来 */
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* 添加黑色半透明遮罩*/
.post-header-with-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(144, 80, 255, 0.6); /*自定义颜色以及透明度*/
    z-index: 1;
    transition: background 0.3s ease;
    pointer-events: none; /* 让遮罩不干扰鼠标事件 */
}

/* 设置z轴，确保标题和元信息在遮罩上层 */
.post-header-with-thumbnail .post-header-text-container {
    position: relative;
    z-index: 2;
}

/* 悬停时：模糊消失 + 遮罩完全透明 */
.post-header-with-thumbnail:hover .post-thumbnail {
    filter: blur(0);
    transform: scale(1);
}

.post-header-with-thumbnail:hover::before {
    background: rgba(0, 0, 0, 0);
}


/* 标题阴影*/
.post-header-with-thumbnail .post-title {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}