CSS进度条动画

/* 基本进度条样式 */
.progress-bar {
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 10px;
  height: 30px;
  overflow: hidden; /* 确保子元素不超出容器 */
}
 
/* 进度条内部元素，用于创建动画效果 */
.progress-bar-inner {
  width: 0%;
  height: 100%;
  background-color: #4caf50;
  border-radius: 10px;
  transition: width 1s ease-in-out; /* 动画效果 */
}
 
/* 当进度条的数据变化时，更新内部元素的宽度 */
.progress-bar[data-value='25'] .progress-bar-inner {
  width: 25%;
}
 
.progress-bar[data-value='50'] .progress-bar-inner {
  width: 50%;
}
 
.progress-bar[data-value='75'] .progress-bar-inner {
  width: 75%;
}
 
.progress-bar[data-value='100'] .progress-bar-inner {
  width: 100%;
}
 
/* HTML结构 */
<div class="progress-bar" data-value="100">
  <div class="progress-bar-inner"></div>
</div>

这个CSS样式表定义了一个简单的水平进度条，其中内部元素.progress-bar-inner的宽度随data-value属性的变化而变化，从而模拟进度的变化。通过设置过渡效果transition，我们可以为宽度的变化增加平滑的动画效果。这个示例展示了如何使用CSS数据属性来动态更新样式，这是一种简单高效的动态样式设计方法。