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

1,112 0 2
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,414
Được Like
12,637
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​
 
Bài viết liên quan
xin giúp về tăng giới hạn user group
xin giúp về tăng giới hạn user group bởi VipBoyTH,
Cài mail cho xenforo
Cài mail cho xenforo bởi quang9292,
cần chỉ cách chọn Display condition cho widget
cần chỉ cách chọn Display condition cho widget bởi virutmt,
Lỗi khi install Xenforo
Lỗi khi install Xenforo bởi nguyenhungpc16,
File mẫu import user trong xenforo
File mẫu import user trong xenforo bởi eaglelee,
ANh em cho mình hỏi
ANh em cho mình hỏi bởi nqh1907,
Bài viết mới
Không set được URL tiếng việt không dấu.
Không set được URL tiếng việt không dấu. bởi cuongpbm,
Mọi người giúp mình cách cộng điểm thành tích này với
Mọi người giúp mình cách cộng điểm thành tích này với bởi huytk88,
Giúp mình tạo ra những bài viết và mới trả lời với ạ
Giúp mình tạo ra những bài viết và mới trả lời với ạ bởi hocphp,
xin giúp về tăng giới hạn user group
xin giúp về tăng giới hạn user group bởi VipBoyTH,
Cài mail cho xenforo
Cài mail cho xenforo bởi quang9292,
Sử dụng CDN hình ảnh tuy nhiên google index link bài viết chứa cdn.domain
Sử dụng CDN hình ảnh tuy nhiên google index link bài viết chứa cdn.domain bởi muabandalat,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Tutorial 2x Adding Social Media Icons to the Header Section - Thêm biểu tượng mạng xã hội vào Header XenForo 2 Tips and Guides 0
PVS Tutorial 2x FontAwesome Icons in Message User Info for Xenforo 2.2 - Thêm biểu tượng FontAwesome trong Message User Info của XenForo 2.2 Tips and Guides 0
PVS Tutorial 2x [cXF] Icons in Visitor menu - Thêm biểu tượng trong menu Visitor XenForo 2 Tips and Guides 0
PVS Tutorial 2x Sidebar block title icons - Thêm biểu tượng vào tiêu đề của block sidebar XenForo 2 Tips and Guides 4
PVS Tutorial 2x Icons on Notable Members page - Thêm biểu tượng vào trang Notable Members của XenForo 2 Tips and Guides 0

Chủ đề tương tự


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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom