- 效果图:
鼠标经过圆点变椭圆.gif
关键部分代码:
xxx.html
<!-- 小圆点 -->
<div class="circle">
<i class="current"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
- xxx.css
/*小圆点*/
.circle{
width: 175px;
height: 20px;
/*background-color: #fff;*/
position: absolute;
left: 50%;
margin-left: -88px;
bottom: 15px;
}
.circle i{
display: inline-block; /*转换为行内块*/
width: 13px;
height: 13px;
background: rgba(255,255,255,0.4);
margin: 0 5px;
border-radius: 6px;
cursor: pointer; /*鼠标变成小手*/
transition: all 0.4s;
}
.circle i:hover{
width: 20px;
background-color: #fff;
}
