[英]Css3 responsive circles connected by a line?
嗨,我正在尝试创建一个div,其中包含使用css3通过线连接的响应圆。
我试图做的例子http://codepen.io/bookcasey/pen/cEntL
在上面的示例中,我想使其响应,以使圆的大小不变,但是如果宽度增加,则我希望第一个和最后一个圆位于UL的左侧和右侧,而其他圆则位于等距离之间。 圆圈最多可以增加或减少两个圆圈和一条线。
您可以使用“ 对齐” div的最后一行的解决方案吗? 为了使它全宽。
并使用绝对定位的伪元素伪造该行。
ul {
text-align: justify;
position: relative;
overflow: hidden;
}
ul:before, .active:after {
content: '';
width: 100%;
border: 2px solid dodgerblue;
position: absolute;
top: 1em;
margin-top: -2px;
z-index: -1;
}
.active:after {
border-color: lightblue;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
width: 2em;
height: 2em;
text-align: center;
line-height: 2em;
border-radius: 50%;
background: dodgerblue;
margin: 0 1em;
display: inline-block;
color: white;
}
.active ~ li {
background: lightblue;
}
body {
font-family: sans-serif;
padding: 2em;
}
我通过使用浮点数来解决,在元素之前作为圆,在元素之后作为连接:
li {
width: 14%;
text-align: center;
line-height: 2em;
float: left;
color: white;
position: relative;
}
li:before{
content: '';
position: absolute;
top: 0;
left: calc(50% - 1em);
width: 2em;
height: 2em;
border-radius: 1em;
background: dodgerblue;
z-index: -1;
}
li:after{
content: '';
position: absolute;
top: .9em;
left: calc(50% + 1em);
width: 100%;
height: .2em;
background: dodgerblue;
z-index: -1;
}
如果您想在每个数字下方添加一个文本块,那么我也要这样做! 在CodePen上查看
HTML
<ul>
<li><span class="marker-number">1</span> <span class="marker-text">Select Car</span></li>
<li class="active"><span class="marker-number">2</span> <span class="marker-text">Questions</span></li>
<li><span class="marker-number">3</span> <span class="marker-text">Problems</span></li>
<li><span class="marker-number">4</span> <span class="marker-text">Inspection</span></li>
<li><span class="marker-number">5</span> <span class="marker-text">Solution</span></li>
</ul>
CSS
ul {
text-align: justify;
position: relative;
overflow: hidden;
}
ul:before, .active:after {
content: '';
width: 100%;
border: 2px solid #21a2d1;
position: absolute;
top: 1em;
margin-top: -6px;
z-index: -1;
}
.active:after {
border-color: #b7b7b7;
}
ul:after {
content: "";
display: inline-block;
width: 100%;
}
li {
width: 1.5em;
height: 1.5em;
text-align: center;
line-height: 1.7em;
border-radius: 50%;
background: #21a2d1;
margin: 0 1em;
display: inline-block;
color: white;
font-size: 1em;
}
.marker-number {
font-size: 14px;
}
li.active {
background: #04497b;
}
.active ~ li {
background: #b7b7b7;
}
span.marker-text {
color: #7d7d7d;
font-size: 12px;
line-height: 16px;
width: 70px;
display: block;
margin-left: -21px;
margin-top: 2px;
font-style: italic;
font-family: Arial;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.