这个安装教程就不过多赘述了，也很简单，所有的 JS 和 css 代码都集成在本地，没有外链调用

至于如果需要自己改颜色的话，查看代码当中的注释效果即可

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏

<!--时间进度效果小工具开始-->    
 <style type="text/css">
      .time-schedule-main{/*background-color: white;*/border-radius: 8px;display: flex; justify-content: space-evenly; align-items: center;}.today-schedule,.toweek-schedule,.tomonth-schedule,.toyear-schedule{display: inline-block;width: 50px;height: 100px;background-color: white;border: 1px solid #eee;border-radius: 99px;}.mizhi-schedule-item{position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 99px;}.today-item,.toweek-item,.tomonth-item,.toyear-item{position: absolute;background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);width: 100%;height: 109%;bottom: 0;transition: all 1s;}.schedule-info{display: flex;color: #ff5991;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;flex-direction: column;align-items: center;justify-content: center;}.schedule-tilte{font-size: 12px;font-weight: 700;}.time-schedule-main img{background-repeat: no-repeat;max-width:unset !important;max-height:unset !important;width: 200px;height: 10px;top: 0;left: 0;position: absolute;animation: mizhi_move_wave 2s linear infinite;-webkit-animation: mizhi_move_wave 2s linear infinite;}@-webkit-keyframes mizhi_move_wave{0%{-webkit-transform: translateX(0)}50%{-webkit-transform: translateX(-25%)}100%{-webkit-transform: translateX(-50%)}}@keyframes mizhi_move_wave{0%{transform: translateX(0)}50%{transform: translateX(-25%)}100%{transform: translateX(-50%)}}
      /* 今日剩余背景颜色 */
      .today-item {
        background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
      }
      /* 本周剩余背景颜色 */
      .toweek-item {
        background-image: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);
      }
      /* 本月剩余背景颜色 */
      .tomonth-item {
        background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
      }
      /* 今年剩余背景颜色 */
      .toyear-item {
        background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
      }
    </style>
    <div class="time-schedule-main">
      <div class="today-schedule">
        <div class="mizhi-schedule-item">
          <div class="today-item">
            <img src="https://pancdn.gouyin.net/uploads/23/%E5%8D%9A%E5%AE%A2%E8%A3%85%E4%BF%AE/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">今天仅剩</span>
            <span class="today-num">100%</span>
          </div>
        </div>
      </div>
      <div class="toweek-schedule">
        <div class="mizhi-schedule-item">
          <div class="toweek-item">
            <img src="https://pancdn.gouyin.net/uploads/23/%E5%8D%9A%E5%AE%A2%E8%A3%85%E4%BF%AE/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本周还有</span>
            <span class="toweek-num">100%</span>
          </div>
        </div>
      </div>
      <div class="tomonth-schedule">
        <div class="mizhi-schedule-item">
          <div class="tomonth-item">
            <img src="https://pancdn.gouyin.net/uploads/23/%E5%8D%9A%E5%AE%A2%E8%A3%85%E4%BF%AE/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">本月剩余</span>
            <span class="tomonth-num">100%</span>
          </div>
        </div>
      </div>
      <div class="toyear-schedule">
        <div class="mizhi-schedule-item">
          <div class="toyear-item">
            <img src="https://pancdn.gouyin.net/uploads/23/%E5%8D%9A%E5%AE%A2%E8%A3%85%E4%BF%AE/HuOUv6.png">
          </div>
          <div class="schedule-info">
            <span class="schedule-tilte">今年还剩</span>
            <span class="toyear-num">100%</span>
          </div>
        </div>
      </div>
    </div>

 <script type="text/javascript">
$(function () {
  $.extend({
    mizhiSchedule: function () {
      var a = new Date(),
        e = 3600 * a.getHours() + 60 * a.getMinutes() + a.getSeconds(),
        c = e / 86400,
        b = (100 - 100 * c).toFixed(1);
      c = (109 - 109 * c).toFixed(2);
      $(".today-num").text(b + "%");
      $(".today-item").css("height", c + "%");
      b = a.getDay();
      0 === b && (b = 7);
      c = (e + 86400 * (b - 1)) / 604800;
      b = (100 - 100 * c).toFixed(1);
      c = (109 - 109 * c).toFixed(2);
      $(".toweek-num").text(b + "%");
      $(".toweek-item").css("height", c + "%");
      b = a.getFullYear();
      c = a.getMonth();
      a = a.getDate();
      var d = new Date(b, c + 1, 0).getDate();
      d = (e + 86400 * (a - 1)) / (86400 * d);
      var f = (100 - 100 * d).toFixed(1);
      (109 - 109 * d).toFixed(2);
      $(".tomonth-num").text(f + "%");
      $(".tomonth-item").css("height", f + "%");
      d = 0;
      f = [
        31,
        (0 == b % 4 && 0 != b % 100) || 0 == b % 400 ? 29 : 28,
        31,
        30,
        31,
        30,
        31,
        31,
        30,
        31,
        30,
        31
      ];
      for (var g = 0; g < c; g++) d += f[g];
      a =
        (e + 86400 * (d + a - 1)) /
        (86400 * ((0 == b % 4 && 0 != b % 100) || 0 == b % 400 ? 366 : 365));
      e = (100 - 100 * a).toFixed(1);
      a = (109 - 109 * a).toFixed(2);
      $(".toyear-num").text(e + "%");
      $(".toyear-item").css("height", a + "%");
    }
  });
  $.mizhiSchedule();
  setInterval($.mizhiSchedule, 2e3);
  
});

    </script>
<!--时间进度效果小工具结束--> 

前言：

这个功能是从 ripro 的主题里面衍生过来，觉得挺好看，就拿过来优化适配了一下，具体效果可以参考本站，安装起来也很简单，不需要再 PHP 中修改，直接在外观小工具里面实现。

安装方法

1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏添加下方代码

如果觉得代码太长，可以将下面的 css 样式中的首页最新发布标题里面 css 样式代码，复制下来，放到一个 css 文件当中再引用即可，

引用代码可参考我提供的，将/css/news.css 更改成你的文件路径就可以了

<link rel='stylesheet' id='ripro_chlid_style-css'  href='/css/news.css' type='text/css' media='all' />

<!--NEW 最新发布样式开始-->  
<style type="text/css">
/*首页最新发布标题*/
.zhankr-zx {
  position: relative;
  margin-bottom: 18px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  line-height: 1;
}

.zhankr-zx:before {
  margin-right: 10px;
}

.zhankr-zx:after {
  margin-left: 10px
}

.zhankr-zx:before, .zhankr-zx:after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  border-radius: 50%;
}

.zhankr-zx span {
  font-family: Futura;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 49px;
  letter-spacing: 5px;
  display: inline-block;
  font-weight: 700;
}

.zhankr-zx .zhankr-zx-n {
  font-size: 20px;
}

.zhankr-zx .zhankr-zx-n strong {
  display: block;
  font-size: 20px;
  background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
  -webkit-background-clip: text;
  color: transparent;
}

.HhcatboxDes {
  position: absolute;
  opacity: 0;
  z-index: 1;
  align-items: center;
  display: flex;
  font-size: 16px;
  height: 180px;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-weight: 600;
  background: #f95491;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.HhCooltitle {
  margin-top: 10px
  }

/*首页最新发布标题*/
</style>
<div class="zhankr-zx">
<span>NEWS</span>
<div class="zhankr-zx-n">
<strong>最新</strong>
<strong>发布</strong>
</div>
</div>
<script>document.querySelectorAll(".zhankr-zx")[0].parentNode.parentNode.style.cssText="background:#fff0;box-shadow:0 0 0";</script>
<!--NEW 最新发布样式结束--> 

1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：

/*首页文章特色图片鼠标悬停效果开始*/
.item-thumbnail:before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,0);transition: background .35s;border-radius: 8px;z-index: 2;max-width: 765px;margin: 0 auto;pointer-events:none;}
.item-thumbnail:after {content: '';position: absolute;top: 50%;left: 50%;width: 50px;height: 50px;margin: -25px 0 0 -25px;background:url(https://dogcdn-blog.gouyin.net/wp-content/uploads/2023/10/Xkd2Yr_【子比美化】发一下本站有用到的美化代码.png?imageMogr2/thumbnail/45x45);background-repeat: no-repeat;background-size: 100% 100%;z-index: 3;-webkit-transform: scale(2);transform: scale(2);transition: opacity .35s,-webkit-transform .35s;transition: transform .35s,opacity .35s;transition: transform .35s,opacity .35s,-webkit-transform .35s;opacity: 0;pointer-events:none;}
.item-thumbnail:hover:before{background:rgba(0,0,0,.5)}
.item-thumbnail:hover:after{-webkit-transform:scale(1);transform:scale(1);opacity:1}
/*首页文章特色图片鼠标悬停效果结束*/

CSS：

/*文章标题加上渐变彩色文字 开始*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: -100% 0
  }
}
/*文章标题加上渐变彩色文字 结束*/