html - 注册流程栏CSS3动画

Question

实现此功能的好方法是什么？

<div class="container">
  <h2>Basic Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:50%">
      <span class="sr-only">70% Complete</span>
    </div>
  </div>
</div>

我应该将进度条上的这些数字作为照片添加吗？ 或者我应该用 CSS3 画圆？如果是这样，谁能举个例子？

Answer 1

下面是一个快速的现场演示，说明如何开始在 CSS 中创建这种类型的视觉效果。这个例子又快又脏，所以为了适应生产，我建议简化一些 CSS，并可能使用 JavaScript 和一些 CSS 伪元素生成 HTML。然后我会研究使用 CSS 动画对颜色进行动画处理。这只是为了让您了解如何完成，并可能激发一些想法。

结果截图:

现场演示:

html, body {
    background-color: #555048;
}

.segment {
    position: relative;
    display: inline-block;
    margin-right: -10px;
}
.circle {
    display: inline-block;
    background-color: #A8A9AD;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    color: white;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
}
.line {
    display: inline-block;
    width: 80px;
    height: 10px;
    margin: 5px 0;
    background-color: #A8A9AD;
    position: relative;
    left: -5px;
}
.label {
    position: absolute;
    left: 10px;
    top: 35px;
    transform: translate(-50%, 0);
    font-size: 12px;
    color: #A8A9AD;
}
.container {
    margin: 50px;
}
.segment.active .circle, .segment.active .line {
    background-color: #C0A05F;
}
.segment.active .label {
    color: #C0A05F;
}

<div class="container">
<div class="segment active"><div class="circle">1</div><div class="label">PERSONAL</div><div class="line"></div></div>
<div class="segment active"><div class="circle">2</div><div class="label">PROFILE</div><div class="line"></div></div>
<div class="segment"><div class="circle">3</div><div class="label">EXPERIENCE</div><div class="line"></div></div>
<div class="segment"><div class="circle">4</div><div class="label">SETTING</div><div class="line"></div></div>
<div class="segment"><div class="circle">5</div><div class="label">CERTIFICATE</div><div class="line"></div></div>
<div class="segment"><div class="circle">6</div><div class="label">SUBMIT</div></div>
</div>

JSFiddle 版本:https://jsfiddle.net/8hxqunLx/1/