animation 环形扩散渐变效果

html

<div className={classnames(styles.item_planet7)}>
  <img src={picsNeptune} />
 </div>

css

.item_planet7 {
    width: 41px;
    height: 41px;
    margin-top: 2px;
    margin-left: 2px;
    border-radius: 50%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    content: '';
    display: block;
    border: none;
    animation: sploosh7 1.2s infinite;
    img{
        width: 41px;
        height: 41px;
        display: block;
        border: none;
    }
}

@keyframes sploosh7{
    0%{
        box-shadow: 0 0 0 0px rgba(103, 255, 67, 0.39) ;
    }
    100%{
        box-shadow: 0 0 0 15px transparent;
    }
}

效果图