.ring-hover {
      -webkit-animation: 1s ease;
      -moz-animation: 1s ease;
      -ms-animation: 1s ease;
      animation: 1s ease;
    }
/*震铃*/
.ring-hover:hover {
  -webkit-animation-name: a-ring;
  -moz-animation-name: a-ring;
  -ms-animation-name: a-ring;
  animation-name: a-ring;
}

@-webkit-keyframes a-ring {
  0% {
    -webkit-transform: scale(1);
  }
  10%,
  20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
  }
}

@-moz-keyframes a-ring {
  0% {
    -moz-transform: scale(1);
  }
  10%,
  20% {
    -moz-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -moz-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -moz-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -moz-transform: scale(1) rotate(0);
  }
}

@-ms-keyframes a-ring {
  0% {
    -ms-transform: scale(1);
  }
  10%,
  20% {
    -ms-transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -ms-transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    -ms-transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -ms-transform: scale(1) rotate(0);
  }
}

@keyframes a-ring {
  0% {
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}