鼠标经过圆点变椭圆

• 效果图:

鼠标经过圆点变椭圆.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;
}