使用纯CSS实现一个滚动进度条

使用纯CSS实现一个滚动进度条可以通过利用CSS的动画和渐变特性来完成。以下是一个简单的例子，展示如何使用纯CSS创建一个水平滚动进度条：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS滚动进度条</title>
<style>
  .progress-bar {
    width: 100%;
    height: 10px;
    background-color: #f3f3f3;
    border-radius: 50px;
    overflow: hidden;
  }

  .progress-bar .progress {
    height: 100%;
    width: 50%; /* 调整这里的百分比以改变进度 */
    background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 2s ease infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
</body>
</html>

这个例子中，.progress-bar 是进度条的外部容器，它有一个灰色的背景色和圆角。.progress 是实际表示进度的部分，它的宽度可以通过修改CSS中的 width 属性来调整。此外，.progress 还使用了一个渐变色背景和一个无限循环的动画，使进度条看起来更加动态。

你可以根据需要调整进度条的样式、颜色、动画等。例如，你可以改变渐变的颜色、调整动画的速度或方向，或者添加其他CSS属性来定制进度条的外观。

posted @ 2024-12-26 09:41  王铁柱6  阅读(115)  评论(0)    收藏  举报