[分享]css3效果圆圈扩散

CSS3是前端开发中一个重要的技术，其提供了许多炫酷的效果，其中包括圆圈扩散效果。

 <div class="circle">
        <div class="inner-circle"></div>
    </div>
    
    .circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 2px solid #ffc107;
        position: relative;
        overflow: hidden;
    }
    
    .circle:hover .inner-circle {
        width: 300px;
        height: 300px;
        top: -100px;
        left: -100px;
    }
    
    .inner-circle {
        width: 0px;
        height: 0px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffc107;
        transition: all 0.5s ease-in-out;
    } 

以上代码实现了一个圆圈扩散效果。当鼠标悬停在圆圈上时，内圆会从中间开始扩散，直到达到指定大小。

通过设置圆圈和内圆的样式，我们可以轻松地实现不同大小、颜色和样式的圆圈扩散效果。