如何使用 HTML 和 CSS 创建动画条？

HTML 和 CSS 可以非常方便地创建动画效果，并且不需要使用 JavaScript 或其他框架。创建动画条需要使用一些基本的 HTML 元素和 CSS 属性。

HTML 结构

在 HTML 中，我们需要创建一个包含动画条的容器，然后添加一个表示进度的元素。通常，可以使用 <div> 元素作为容器，并使用 <span> 元素表示进度。

<div class="progress-bar">
  <span class="progress"></span>
</div>

CSS 样式

接下来，我们需要为容器和进度元素添加样式。这些样式将控制动画条的外观和行为。

首先，让我们为容器添加样式。我们将使容器居中，并指定其大小和颜色：

.progress-bar {
  margin: 50px auto;
  width: 50%;
  height: 20px;
  background-color: #eee;
}

接下来，我们将为进度元素添加样式。我们将使用伪元素 :before 和 :after 创建开始和结束的圆角，并添加渐变背景色和动画效果：

.progress:before,
.progress:after {
  content: "";
  display: table;
}
.progress:after {
  clear: both;
}
.progress {
  display: block;
  width: 0;
  height: 100%;
  background: #6bccff;
  background: linear-gradient(to right, #6bccff 0%, #008ce6 100%);
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  animation: progress-bar 2s linear infinite;
}

.progress:before,
.progress:after {
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 0;
}

.progress:before {
  left: -20px;
  width: 20px;
  background: #6bccff;
}

.progress:after {
  right: -20px;
  width: 20px;
  background: #008ce6;
}

CSS 动画

最后，我们需要为动画条添加动画效果。我们将使用 CSS 动画 @keyframes 规则来创建从 0% 到 100% 的动画效果：

@keyframes progress-bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

完整代码

这就是创建动画条所需的完整 CSS 和 HTML 代码：

<div class="progress-bar">
  <span class="progress"></span>
</div>

.progress-bar {
  margin: 50px auto;
  width: 50%;
  height: 20px;
  background-color: #eee;
}

.progress:before,
.progress:after {
  content: "";
  display: table;
}
.progress:after {
  clear: both;
}
.progress {
  display: block;
  width: 0;
  height: 100%;
  background: #6bccff;
  background: linear-gradient(to right, #6bccff 0%, #008ce6 100%);
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  animation: progress-bar 2s linear infinite;
}

.progress:before,
.progress:after {
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 0;
}

.progress:before {
  left: -20px;
  width: 20px;
  background: #6bccff;
}

.progress:after {
  right: -20px;
  width: 20px;
  background: #008ce6;
}

@keyframes progress-bar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

这样，我们就创建了一个简单的动画条！