当前位置：首页 > CSS

css制作卡片进度

2026-04-02 09:08:56CSS

CSS 制作卡片进度条的方法

方法一：使用线性渐变背景 通过 CSS 的 linear-gradient 属性创建动态进度条效果。调整渐变色的比例即可反映进度。

.progress-card {
  width: 300px;
  height: 20px;
  background: linear-gradient(to right, #4CAF50 70%, #e0e0e0 30%);
  border-radius: 10px;
  margin: 10px 0;
}

方法二：伪元素覆盖法 利用 ::before 或 ::after 伪元素作为进度条，通过控制其宽度实现进度变化。

.progress-container {
  width: 300px;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.progress-bar::before {
  content: '';
  position: absolute;
  width: 65%;
  height: 100%;
  background-color: #2196F3;
  border-radius: 4px;
  animation: progress 2s ease-in-out;
}

方法三：HTML5 progress 元素定制 结合 <progress> 标签并通过 CSS 深度定制样式。

<progress value="75" max="100" class="custom-progress"></progress>

.custom-progress {
  width: 300px;
  height: 10px;
  border-radius: 5px;
}

.custom-progress::-webkit-progress-bar {
  background-color: #eeeeee;
  border-radius: 5px;
}

.custom-progress::-webkit-progress-value {
  background-color: #FF5722;
  border-radius: 5px;
}

方法四：动画效果增强 为进度条添加平滑过渡动画，提升视觉体验。

@keyframes fill-progress {
  from { width: 0%; }
  to { width: var(--progress); }
}

.animated-progress {
  --progress: 80%;
  height: 6px;
  background-color: #9C27B0;
  border-radius: 3px;
  animation: fill-progress 1.5s forwards;
}

注意事项

css制作卡片进度