如何给不规则背景图片按钮加上动画效果

html代码

<div className={styles.ground}>
  <span 
   className={`${styles.circle} ${show?styles.explodeCircle:''}`}
   style={show?{left:'120px'}:{top:'108px'}}

 />
  <img 
    src={img} 
    onMouseOver={()=>{this.setState({show:true})}} 
    onMouseLeave={()=>{this.setState({show:false})}}
 />
</div>

css代码

.ground{
  width:153px;
  left:-47px;
  z-index:-1;
  top:0;
  transition: all 0.5s ease;
  .explodeCircle{
    width:200px;
    height:120px;
    transform:skew(130deg);
    margin:50px auto;
    animation:explode .7s forwardsl
    z-index:10
  }
  .circle{
   position:absolute;
   top:-50px;
   left:0;
   right:0;
   bottom:0;
   z-index:100;
   margin-left:-500px;
   margin-top:-300px;
   pointer-events:none;
 }
 img{
  width:153px;
  transition:400ms;
  z-index:10000;
 }
}
@keyframes explode{
 0%{
   width:0;
   height:0;
   margin-left:-500px;
   margin-top:-300px;
   background:rgba(49,255,249,0.1)
 }
100%{
   width:112px;
   height:85px;
   transfrom:skew(130deg,-3deg);
   margin-left:-500px;
   margin-top:-300px;
   background:rgba(49,255,249,0.1)
 }
}