创建由行连接的CSS3圆圈

Question

我必须在CSS中实现以下循环和行组合,我正在寻找有关如何有效实现它的指针.圆圈和线条应如下所示:

我可以这样实现圈子:

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

但这些线条对我来说很难理解.

圆的大小根据是否为活动步而改变,连接圆的线的颜色也根据状态而改变.我怎么做到这一点？

Answer 1

您可以使用伪元素和相邻的兄弟选择器(~)无需额外标记来实现此效果:

在CodePen上演示

HTML:

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}


li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active ~ li {
  background: lightblue;
}

.active ~ li::before {
  background: lightblue;
}

CSS:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>  

Answer 2

借助@bookcasey 的优秀答案,我发现自己正在以相反的方式做到这一点,以使其响应;

• 我将圆圈作为::before伪选择器(具有自动css计数器).
• li它们之间的线是元素,因此它们可以通过flexbox拉伸.

它现在延伸到填充父级,并自动处理不同数量的步骤.你也可以做一些事情,比如调整font-size父母ul,让整个事情适应.

我相信它可以改进,所以随时贡献:)

Interactive CodePen:Flexbox时间轴,步骤如下:http://codepen.io/ccondrup/pen/bqbGWB？edit = 1100

ul {
  align-content: center;
  align-items: center;
  counter-reset: stepCount;
  display: flex;
  justify-content: space-around;
  margin: 10vh auto 20vh;  /* for codepen */
}

li {
  background: dodgerblue;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
}

li::before {
  background: dodgerblue;
  border-radius: 50%;
  color: white;
  content: counter(stepCount);
  counter-increment: stepCount;
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
}

li.active {
  background-color: lightblue;
}

li.active~li {
  background-color: lightblue;
}

li.active~li::before {
  background-color: lightblue;
}

li:last-child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0;
/* Shorthand: flex: 0 1 0; */
}

ul.bigger {
  font-size: 1.3em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: navy;
}

ul.roman li::before {
  content: counter(stepCount, upper-roman);
}

ul.triangle li::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid dodgerblue;
  content: '';
  top: -.65em;
}

ul.triangle li:first-child::before {
  left: 0;
}

ul.triangle li.active~li::before {
  border-bottom-color: lightblue;
}

<ul>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


<ul class="bigger highlight-active">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>


<ul class="roman">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


<ul class="triangle">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
</ul>

Answer 3

虽然CSS3可以实现这一点,但我认为SVG是一种用于复杂接口的更好工具.

我用SVG(用CSS设计)制作了这个:

这里有一个Plunk来演示.

Answer 4

它不是我自己的,但它工作得很好,看起来很优雅,只适用于CSS,你可以更加个性化.来源http://jsfiddle.net/Misiu/y1Lo3qh1/

var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function () {
    $('.progress .circle:nth-of-type(' + i + ')').addClass('active');
    $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');
    $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('✓');
    $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');
    $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');
    i++;
    if (i == 8) {
        $('.progress .circle').removeClass().addClass('circle');
        $('.progress .bar').removeClass().addClass('bar');
        i = 1;
    }
}, 1000);

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
}
/* Form Progress */

.progress {

  margin: 20px auto;
  text-align: center;
  padding-bottom: 80px;
}
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
  vertical-align:top;
}
.progress .bar {
  position: relative;
  width: 80px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  top:16px;
  vertical-align:top
}
.progress .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 18px;
  margin-left: -30px;
  display: block;
  width: 100px;
  margin-top: 5px;
}
/* Done / Active */

.progress .bar.done,
.progress .circle.done {
  background: #eee;
}
.progress .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.done .title {
  color: #444;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.active .title {
  color: #0c95be;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order</span>

  </div> <span class="bar done"></span>

  <div class="circle done"> <span class="label">2</span>
    <span class="title">Address</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">3</span>
    <span class="title">Payment</span>

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

  <div class="circle"> <span class="label">4</span>
    <span class="title">Review</span>

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

  <div class="circle"> <span class="label">5</span>
    <span class="title">Finish</span>

  </div>
</div>
<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order informations</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">2</span>
    <span class="title">Order review</span>

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

  <div class="circle"> <span class="label">3</span>
    <span class="title">Finish</span>

  </div>
</div>

Answer 5

仅 CSS3、Flex、响应式、动态、可定制

好吧......我有点过火了 - 就是这样。

（已在 Chrome、Firefox、Safari 上测试并运行 - 截至 2020 年 7 月）

/* custom stylings */
:root {
  --active-bg-color: #1975CF;
  --active-text-color: white;
  --inactive-bg-color: #C4DDF4;
  --inactive-text-color: #3480D2;
  --line-width: 5%;
  --active-circle-diam: 30px;
  --inactive-circle-diam: 20px;
}
ul {
  font-family: Arial;
  border: 1px solid magenta;
}


/* --- breadcrumb component --- */
ul {
  position:relative;
  display:flex;
  justify-content: space-between;
  align-items: center;
   padding: 0;
}
li:only-child {
  margin: auto;
}

/* lines */
li:not(:last-child):after {
  content: '';
  position: absolute;
  top: calc((100% - var(--line-width)) / 2);
  height: var(--line-width);
  z-index: -1;
}
/* circles */
li {
  overflow: hidden;
  text-align:center;
  border-radius: 50%;
  text-indent: 0;
  list-style-type: none;
}

/* active styling */
li,
li:not(:last-child):after {
  background: var(--active-bg-color);
  color: var(--active-text-color);
}

/* inactive styling */
li.active:after,
li.active ~ li,
li.active ~ li:not(:last-child):after {
  background: var(--inactive-bg-color);
  color: var(--inactive-text-color);
}

/* circle sizing */
li.active {
  width: var(--active-circle-diam);
  height: var(--active-circle-diam);
  line-height: calc(var(--active-circle-diam) + 0.1rem);
  font-size: calc(var(--active-circle-diam) / 1.6);
}
li:not(.active) {
  width: var(--inactive-circle-diam);
  height: var(--inactive-circle-diam);
  line-height: calc(var(--inactive-circle-diam) + 0.1rem);
  font-size: calc(var(--inactive-circle-diam) / 1.6);
}

/* 
Calculate ddynamic width using css3 only.
N.B. if you know the total count, hardcode away!
*/

li:first-child:nth-last-child(2):not(:last-child):after,
li:first-child:nth-last-child(2) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 1);
}
li:first-child:nth-last-child(3):not(:last-child):after,
li:first-child:nth-last-child(3) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 2);
}
li:first-child:nth-last-child(4):not(:last-child):after,
li:first-child:nth-last-child(4) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 3);
}
li:first-child:nth-last-child(5):not(:last-child):after,
li:first-child:nth-last-child(5) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 4);
}
li:first-child:nth-last-child(6):not(:last-child):after,
li:first-child:nth-last-child(6) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 5);
}
li:first-child:nth-last-child(7):not(:last-child):after,
li:first-child:nth-last-child(7) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 6);
}

li:first-child:nth-last-child(8):not(:last-child):after,
li:first-child:nth-last-child(8) ~ li:not(:last-child):after {
    width: calc((100% - 2rem) / 7);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul> 
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul> 
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
</ul> 
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
</ul> 
<ul>
  <li>1</li>
  <li class="active">2</li>
  <li>3</li>
  <li>4</li>
</ul> 
<ul>
  <li>1</li>
  <li class="active">2</li>
  <li>3</li>
</ul> 
<ul>
  <li class="active">1</li>
  <li>2</li>
</ul> 
<ul>
  <li class="active">1</li>
</ul>