文/王乐生
最近重新开始接触CSS，挑战了一下用CSS代码拼出这样的一个效果。
先附上效果图
HTML代码块
<div class="picDiv">
<div>
<div class="bigCircle">
<div class="solidRing"></div>
</div>
<div class="sectionDiv">
<div class="rod"></div>
</div>
</div>
<div style="margin-left:100px;position:absolute;margin-top:-12px;">
<div class="bigCircle">
<div class="solidRing"></div>
</div>
<div class="sectionDiv">
<div class="rod"></div>
</div>
</div>
<div style="margin-left:200px;position:absolute;margin-top:-12px;">
<div class="bigCircle">
<div class="solidRing"></div>
</div>
<div class="sectionDiv">
<div class="rod"></div>
</div>
</div>
<div style="margin-left:300px;position:absolute;margin-top:-12px;">
<div class="bigCircle">
<div class="solidRing"></div>
</div>
</div>
</div>
CSS代码块
.bigCircle{
width: 10px;
height: 10px;
border: 1px solid #999999;
border-radius: 50%;
}
.solidRing{
width: 8px;
height: 8px;
background: #999999;
border-radius: 50%;
margin-top:1px;
margin-left:1px;
}
.rod{
width: 60px;
height: 1px;
background: #999999;
margin-left:25px;
float:right;
display:inline;
}
.picDiv{
margin-left:30px;
margin-top:30px;
width:80px;
height:16px;
position:relative;
}
.sectionDiv{
line-height:160px;
overflow:hidden;
position:absolute;
margin-top:-6px;
}
