Tutorial 2x Thêm biểu tượng Font Awesome động cho user group của XenForo 2

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,491
Được Like
10,733
Thêm biểu tượng Font Awesome động cho user group của XenForo 2

Đơn giản chỉ cần vào template extra.less vào thêm đoạn code sau:
Mã:
/* 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 */

Thay X bằng ID của group bạn muốn chỉnh sửa:
Mã:
username--styleX

Kết quả:

demo1.gif


demo.gif

Chúc các bạn thành công.


Nguồn: xenforo.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom