“人生倒计时”进度条速度调整记录

问题描述

人生倒计时进度条转动太快，当前状态是1秒钟滚到最右边然后1秒钟从右往回滚到最左边，来回往复。

调整目标

  1. 减慢进度条的滚动速度
  2. 保留滚动动画效果
  3. 改为单向滚动（只往一个方向动）

问题分析

在尝试修改时，发现以下CSS修改方式都无效：

1. CSS transition 修改无效

.aside-timelife .progress-bar-inner {
    transition: width 10s ease-in-out !important;
}

失效原因：

  • 进度条使用的是 animation 而不是 transition
  • transition 只能控制属性值变化时的过渡效果
  • 无法控制已经定义好的动画行为

2. CSS animation-duration 修改无效

.aside-timelife .progress-bar-inner {
    animation-duration: 10s !important;
    -webkit-animation-duration: 10s !important;
}

失效原因：

  • 动画是通过JavaScript动态设置的内联样式
  • 元素上可能有类似 style="animation: progress 1s linear infinite" 的内联样式
  • 内联样式的优先级高于普通的CSS规则
  • 即使使用了 !important，如果内联样式也使用了 !important 或者JavaScript持续重置样式，CSS覆盖仍然会无效

3. 为什么需要重写整个动画？

/* 只修改单个属性无效 */
.aside-timelife .progress-bar-inner {
    animation-duration: 10s !important;
}

/* 重写整个动画有效 */
.aside-timelife .progress-bar-inner-0 {
    animation: slow-scroll 10s linear infinite !important;
}

有效的原因：

  • 完整的动画定义：定义了完整的 animation 属性，而不是只修改 animation-duration
  • 自定义动画名称：使用 slow-scroll 而不是原来的 progress，避免冲突
  • 针对特定类名：直接针对 .progress-bar-inner-0/1/2/3 四个类名，选择器更精确
  • 强制覆盖：所有属性都使用了 !important，提高CSS规则的优先级

解决方案

代码实现

在Halo主题设置的 内嵌Html内容（body） 中添加以下代码：

<style>
/* 定义单向滚动动画 */
@keyframes slow-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 30px 0; }
}

@-webkit-keyframes slow-scroll {
    0% { background-position: 0 0; }
    100% { background-position: 30px 0; }
}

/* 应用单向滚动动画 */
.aside-timelife .progress-bar-inner-0,
.aside-timelife .progress-bar-inner-1,
.aside-timelife .progress-bar-inner-2,
.aside-timelife .progress-bar-inner-3 {
    transition: none !important;
    animation: slow-scroll 1s linear infinite !important;
    -webkit-animation: slow-scroll 1s linear infinite !important;
    animation-direction: normal !important;
    -webkit-animation-direction: normal !important;
}
</style>

关键点说明

  1. 定义自定义动画：

    • 使用 @keyframes slow-scroll 定义背景位置从 0 到 30px 的滚动效果
    • 同时定义标准版和 -webkit- 前缀版以兼容不同浏览器

  2. 针对特定类名：

    • 必须针对 .progress-bar-inner-0 到 .progress-bar-inner-3 四个类名
    • 不能使用通配符或父级选择器

  3. 禁用宽度变化：

    • transition: none !important 禁用进度条长度的动态变化
    • 只保留背景滚动的动画效果

  4. 设置单向滚动：

    • animation-direction: normal !important 确保动画只往一个方向播放
    • 避免来回往复的效果

  5. 速度调整：

    • animation: slow-scroll 1s linear infinite !important 设置动画时长为1秒
    • -webkit-animation: slow-scroll 1s linear infinite !important WebKit浏览器兼容
    • 两个地方的时间值必须相同

速度调整方法

修改代码中的时间值（两处都要同时修改）：

  • 1s - 1秒（当前设置）
  • 5s - 5秒
  • 10s - 10秒
  • 20s - 20秒
  • 30s - 30秒

注意：animation 和 -webkit-animation 两个属性的时间值必须设置为相同的数值。

技术细节

原始动画机制

  • 进度条使用背景图案滚动效果（background-position 动画）
  • 原始速度为1秒完成一次滚动
  • 默认为来回往复动画

修改后的动画机制

  • 保持背景图案滚动效果
  • 通过自定义 @keyframes 控制动画行为
  • 使用 animation-direction: normal 强制单向播放
  • 通过调整动画时长控制滚动速度

浏览器兼容性

  • Chrome/Edge：使用 -webkit- 前缀属性
  • Firefox：使用标准属性
  • Safari：使用 -webkit- 前缀属性

修改位置

Halo后台 → 主题设置 → 增强功能 → 内嵌Html内容（body）

修改日期

2026-03-25

修改状态

✅ 已完成并验证有效