中心向周围扩散的圆圈CSS效果

punchCard.jpg

这是我项目实践中的一个效果，从上班打卡向外扩展
完整代码如下:

 <div className="container">
     <div className="wave">
         <div className="circle"></div>
         <div className="card">
             <span style={{fontSize:"20px",}}>打卡</span>
         </div>
     </div>
</div>

.container {  
    position: absolute;
    top: 75%;
    left: 40%;
    width: 40%;  
    height: 40%;
} 

/* 波动效果 */
.wave {
    position: relative;
    width: 100px;
    height: 100px;
    text-align: center;
}
.wave .circle{
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    background: #77ACF8 ;
}
.wave .circle:first-child {
    animation: circle-opacity 2s infinite;
}

@keyframes circle-opacity{
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}
.card{
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color: #77ACF8;
    padding: 25px 0;
    color:#fff;
    position: absolute;
    z-index: 999;
}