css制作卡片进度

CSS 制作卡片进度条

使用 CSS 可以轻松实现卡片进度条效果，以下是几种常见方法：

使用线性渐变背景

通过 linear-gradient 背景可以创建简单的进度条效果：

.progress-card {
  width: 300px;
  height: 20px;
  background: linear-gradient(90deg, #4CAF50 75%, #ddd 75%);
  border-radius: 10px;
}

动态调整进度可以通过 JavaScript 修改百分比值。

使用伪元素叠加

利用 ::before 或 ::after 伪元素创建进度指示条：

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

.progress-bar {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 65%;
  background: #2196F3;
  border-radius: 4px;
  transition: width 0.3s ease;
}

使用 CSS 变量动态控制

结合 CSS 变量实现更灵活的控制：

.card {
  --progress: 30%;
  width: 200px;
}

.progress-indicator {
  height: 6px;
  background: linear-gradient(90deg, #FF5722 var(--progress), #f0f0f0 var(--progress));
}

通过 JavaScript 动态更新 --progress 变量值。

圆环形进度条

使用 conic-gradient 创建圆形进度指示：

.circular-progress {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#8BC34A 270deg, #ededed 0deg);
}

动画效果

为进度条添加平滑动画：

.animated-progress {
  transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

响应式设计考虑

确保进度条在不同设备上正常显示：

@media (max-width: 600px) {
  .progress-card {
    width: 100%;
  }
}

这些方法可以根据具体需求组合使用，创建各种样式的卡片进度指示效果。实际应用中通常需要配合 JavaScript 来实现动态数据绑定和交互功能。