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 来实现动态数据绑定和交互功能。
