/* 按钮动画css */

.explode-circle {
  animation: explode 0.6s forwards;
}

.desplode-circle {
  animation: desplode 0.6s forwards;
}

@keyframes explode {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(42, 53, 80, 0.2);
  }
  100% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(255, 255, 255);
  }
}

@keyframes desplode {
  0% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(255, 255, 255, 0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(255, 255, 255, 0.5);
  }
}

/* 主题色颜色按钮的动画 */
.su_custom_color .su_button_circle.explode-circle {
  animation: explode-custom 0.5s forwards;
}
.su_custom_color .su_button_circle.desplode-circle {
  animation: desplode-custom 0.5s forwards;
}

@keyframes explode-custom {
  0% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(171, 132, 103, 0.2);
  }
  100% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: #0a3864;
  }
}

@keyframes desplode-custom {
  0% {
    width: 800px;
    height: 800px;
    margin-left: -300px;
    margin-top: -300px;
    background-color: rgba(10, 56, 100, 0.8);
  }
  100% {
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    background-color: rgba(10, 56, 100, 0.5);
  }
}

/* hover文字效果 */