CSS实现轮播图指示点原地扩张效果

CSS实现轮播图指示点原地扩张效果

最近在做模拟中酒网网站的练习，中酒网首页的主轮播图中有一组横向排列的指示点，在鼠标悬浮或划过时，对应圆点会呈扩张效果。因为之前没有做过类似的效果，所以特别想实现一下。
下面是具体效果：

遇到的难点：

1. 小圆点所在盒子位置水平居中
2. 显示边框时不会影响到周围元素（因为在设置弹性盒或者margin后，设置边框的话，周围元素会受到挤压）
3. 显示边框时，原先小圆点位置不变，有一种由内而外扩张的效果，同时背景透明

对应解决办法：

1. 利用绝对定位元素水平居中方法实现小圆点所在盒子位置水平居中；

//绝对定位元素水平居中方法
.element {
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;      //高度的一半
margin-left: -300px;    //宽度的一半
}

2. 显示边框时将该盒子设置为相对定位，让其基于自己原来位置进行变化，原盒子不脱离文档流，同时相对定位于原文档流之外，周围元素其宽高变化不受影响

//设置元素相对定位
.element {
position: relative;
left: 0px;
top: 0px;   
}

3. box-sizing设置为content-box，设置其为正常盒子（默认为正常盒子，怪异盒需要设置），设置border和background

//设置元素
.element {
box-sizing: content-box;
background-color: transparent; //背景设置透明
border: 3px solid #fff;  
}

具体实现代码如下：

.littleul {
        position: absolute; //设置绝对定位水平居中        
        bottom: 20px;        
        right: 50%;        
        margin-right: -75px;        
        min-width: 120px;        
        min-height: 15px;        
        display: flex; //设置为弹性盒控制div（小圆点）垂直居中        
        justify-content: space-between;        
        align-items: center;        
        z-index: 10;        
        div {            
        text-align: center;            
        line-height: 15px;            
        width: 12px;            
        height: 12px;            
        background: white;            
        border-radius: 50%; //盒子设置为圆形            
        cursor: pointer;        
        }        
        .active {            
        position: relative; //在激活时设置为相对定位，起到在出现边框时不影响（不挤压）旁边元素的效果            
        box-sizing: content-box;            
        background-color: transparent; //背景设置透明            
        border: 3px solid #fff;        }    }
        

才识疏浅，肯定有更简单更便捷更直接的办法可以实现这个效果，如有不足之处，还请多多见谅！