SHARE [XF2.1] Tambahkan Font Ikon animasi yang mengagumkan ke grup pengguna

[RayMantic]

tambahkan ekstra.less

Spoiler: code

* ANIMATION_GU_BY ZOOM */
.username--style3:hover:before{
display:inline-block;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounceOut {
  20% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  50%, 55% {
  opacity: 1;
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
  }
  @keyframes bounceOut {
  20% {
  -webkit-transform: scale3d(.9, .9, .9);
  transform: scale3d(.9, .9, .9);
  }
  50%, 55% {
  opacity: 1;
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
  opacity: 0;
  -webkit-transform: scale3d(.3, .3, .3);
  transform: scale3d(.3, .3, .3);
  }
}

.username--style5:hover:before{
display:inline-block;
-webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-animation-duration: 2s;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rotateOut {
  0% {
  -webkit-transform-origin: center;
  transform-origin: center;
  opacity: 1;
  }
  100% {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, 200deg);
  transform: rotate3d(0, 0, 1, 200deg);
  opacity: 0;
  }
  }
  @keyframes rotateOut {
  0% {
  -webkit-transform-origin: center;
  transform-origin: center;
  opacity: 1;
  }
  100% {
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transform: rotate3d(0, 0, 1, 200deg);
  transform: rotate3d(0, 0, 1, 200deg);
  opacity: 0;
  }
}

.username--style4:hover:before {
display:inline-block;
-webkit-transform-origin-x: 90%;
  -ms-transform-origin-y: 35%;
   transform-origin-z: initial;
  -webkit-animation-name: swing;
  animation-name: swing;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes swing {
  20% {
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
  transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
  transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
  transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
  transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  }
  }
  @keyframes swing {
  20% {
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
  transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
  transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
  transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
  transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  }
}

.username--style6:hover:before {
display:inline-block;
-webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flash {
  0%, 50%, 100% {
  opacity: 1;
  }

  25%, 75% {
  opacity: 0;
  }
}

.username--style10:hover:before {
display:inline-block;
-webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes swing {
  20% {
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
  transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
  transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
  transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
  transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  }
  }
  @keyframes swing {
  20% {
  -webkit-transform: rotate3d(0, 0, 1, 15deg);
  transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
  -webkit-transform: rotate3d(0, 0, 1, -10deg);
  transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
  -webkit-transform: rotate3d(0, 0, 1, 5deg);
  transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
  -webkit-transform: rotate3d(0, 0, 1, -5deg);
  transform: rotate3d(0, 0, 1, -5deg);
  }
  100% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
  }
}

.username--style7:hover:before{
display:inline-block;
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideOutRight {
  0% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  20% {
  visibility: hidden;
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  }
  }
  @keyframes slideOutRight {
  0% {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  }
  20% {
  visibility: hidden;
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  }
}

.username--style9:hover:before {
display:inline-block;
-webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
}

/* END ANIMATION_GU_BY ZOOM */

mengganti X dengan jumlah peringkat yang diinginkan
username--styleX