css制作网格进度条

2026-04-01 01:09:35CSS

使用 CSS Grid 制作网格进度条

通过 CSS Grid 布局可以轻松创建网格化的进度条效果。以下是一个基础的实现方法：

<div class="grid-progress">
  <div class="progress-step active"></div>
  <div class="progress-step active"></div>
  <div class="progress-step"></div>
  <div class="progress-step"></div>
</div>

.grid-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 300px;
}

.progress-step {
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 4px;
}

.progress-step.active {
  background-color: #4CAF50;
}

动态控制进度状态

通过 JavaScript 动态控制进度网格的激活状态：

css制作网格进度条

// 设置进度到第3步（索引从0开始）
function setProgress(step) {
  const steps = document.querySelectorAll('.progress-step');
  steps.forEach((el, index) => {
    el.classList.toggle('active', index <= step);
  });
}

添加过渡动画效果

为进度变化添加平滑的过渡效果：

css制作网格进度条

.progress-step {
  transition: background-color 0.3s ease;
}

响应式网格进度条

使用 CSS 变量使网格进度条适应不同尺寸：

.grid-progress {
  --step-count: 4;
  --step-gap: 8px;

  grid-template-columns: repeat(var(--step-count), 1fr);
  gap: var(--step-gap);
}

@media (max-width: 600px) {
  .grid-progress {
    --step-gap: 4px;
  }
}

进阶样式设计

添加更丰富的视觉效果：

.progress-step {
  position: relative;
  overflow: hidden;
}

.progress-step.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}

这些方法可以组合使用，根据实际需求调整网格数量、颜色和动画效果，创建出各种风格的网格进度条。