/* 头像底部中心固定，左右摇摆30度 */
.avatar-img img {
  transition: all 0.3s ease;
  transform-origin: bottom center;  /* 设置旋转中心点为底部中心 */
}

.avatar-img:hover img {
  animation: swingDeg 1s ease-in-out 1;
}

@keyframes swingDeg {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(20deg);   /* 向右转20度 */
  }
  25% {
    transform: rotate(-20deg);  /* 向左转20度 */
  }
  37.5% {
    transform: rotate(18deg);    /* 向右转20度 */
  }
  50% {
    transform: rotate(-18deg);    /* 向左转20度 */
  }
  62.5% {
    transform: rotate(16deg);   /* 向右转16度 */
  }
  75% {
    transform: rotate(-16deg);  /* 向左转16度 */
  }
  87.5% {
    transform: rotate(16deg);    /* 回摆到16度 */
  }
  100% {
    transform: rotate(0deg);    /* 向左转18度 */
  }
}