创建CSS3通过线连接的圆 [英] Creating CSS3 Circles connected by lines

问题描述

我必须在CSS中实现以下圆和线组合，我正在寻找如何有效地实现这一点的指针。圆形和线条应如下所示：

I have to implement the following circle and line combination in CSS and I am looking for pointers on how to implement this effectively. The circles and lines should look like this:

我可以这样实现圈子：

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; 
}

但这些行对我来说很难理解。

but the lines are tricky for me to understand.

圆的大小根据是否为活动步进而改变，连接圆的线的颜色也根据状态而改变。

The size of the circle changes depending on whether it is the active step or not, and the color of the line connecting the circles changes as well depending on status. How would I accomplish this?

推荐答案

您可以使用伪元素和相邻的兄弟选择器〜）：

You can achieve this effect with no additional markup using pseudo-elements and the adjacent sibling selector (~):

Demo on CodePen

HTML：

<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>  

CSS：

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;
}

这篇关于创建CSS3通过线连接的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！