包裹追踪页面开发问询：实现已完成流程模糊与当前状态高亮

嘿，我来帮你搞定这个包裹追踪页面的视觉需求！先梳理下现有代码里的小细节：每个流程项单独放在<ul>里没必要，而且class名imgage拼写错啦（应该是image），先把这些调整好，再加上状态样式就完美了。

下面是重构后的完整代码，能实现已完成流程模糊显示、当前状态高亮发光的效果：

完整代码示例 #

HTML 结构 #

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

<div class="tracking-container">
  <ul class="tracking-list">
    <!-- 已完成的流程 -->
    <li class="tracking-item completed">
      <div class="image">
        <img src="images/fil_1.jpg" width="202px" height="100px" alt="初始流程">
      </div>
    </li>
    <!-- 当前状态 -->
    <li class="tracking-item current">
      <div class="image">
        <img src="images/export1.jpg" width="202px" height="100px" alt="Import">
        <h2>IMPORT</h2>
      </div>
    </li>
    <!-- 未开始的流程 -->
    <li class="tracking-item">
      <div class="image">
        <img src="images/UKimport.jpg" width="202px" height="100px" alt="Carrier">
        <h2>CARRIER</h2>
      </div>
    </li>
    <li class="tracking-item">
      <div class="image">
        <img src="images/DHL.jpg" width="202px" height="100px" alt="DHL">
        <h2>DHL</h2>
      </div>
    </li>
    <li class="tracking-item">
      <div class="image">
        <img src="images/HMRC_logo.jpg" width="202px" height="100px" alt="HMRC">
        <h2>HMRC</h2>
      </div>
    </li>
    <li class="tracking-item">
      <div class="image">
        <img src="images/Importt.jpg" width="202px" height="100px" alt="最终流程">
      </div>
    </li>
  </ul>
</div>

CSS 样式 #

/* 全局重置与基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  padding: 2rem;
}

.tracking-container {
  max-width: 1200px;
  margin: 0 auto;
}

.tracking-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* 替代margin，布局更灵活 */
}

.tracking-item {
  list-style-type: none;
  text-align: center;
  transition: all 0.3s ease; /* 过渡动画，切换状态更平滑 */
}

.image {
  margin-top: 150px;
}

.tracking-item h2 {
  margin-top: 10px;
  font-size: 1.2rem;
}

/* 已完成流程：模糊效果 */
.tracking-item.completed {
  filter: blur(3px);
  opacity: 0.7;
}

/* 当前状态：高亮发光效果 */
.tracking-item.current {
  filter: none;
  opacity: 1;
  /* 图片和文字都加发光效果 */
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  transform: scale(1.05); /* 轻微放大，增强视觉焦点 */
}

代码说明 #

1. 结构优化：把所有流程项放到同一个<ul>里，用flex布局实现横向排列，比float更稳定易维护。
2. 状态标记：用.completed类标记已完成流程，.current标记当前状态，后续你只需要根据包裹的实际状态动态给对应项添加这些类就行。
3. 视觉效果实现：
   • 已完成项：用filter: blur(3px)实现模糊，配合opacity降低透明度，弱化视觉权重。
   • 当前项：用box-shadow给容器加发光边框，text-shadow给文字加发光效果，再用transform: scale轻微放大，突出当前状态。
4. 过渡动画：给.tracking-item加transition，切换状态时会有平滑的动画效果，提升用户体验。

这样调整后，你的包裹追踪页面就能完美实现需求啦！

内容的提问来源于stack exchange，提问作者xProgram