Other Pulsing Register Button - Hiệu ứng đập nhịp cho nút đăng ký XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,682
Pulsing Register Button - Hiệu ứng đập nhịp cho nút đăng ký XenForo 2

Bài viết này sẽ giúp các bạn thêm hiệu ứng đập nhịp cho nút đăng ký. Xem hình ảnh minh họa bên dưới để hiểu rõ hơn.

image.gif

Thêm đoạn code sau vào template extra.less:
Mã:
/* PULSE ANIMATION */
.pulse {
    position: relative;
  box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse:hover {
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}

Trong template PAGE_CONTAINER tìm:
Mã:
<span class="p-navgroup-linkText">{{ phrase('register') }}</span>

Thay bằng:
Mã:
<span class="p-navgroup-linkText"><span class="pulse">{{ phrase('register') }}</span></span>

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


Nguồn: xenforo.com​
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,682
chỉ được mỗi xenforo 2 thôi à anh :D @PVS
ừ vì xen 2 nó có cấu trúc khác với xen 1 rồi nên mình nghĩ vậy, bạn test giúp mình xem xen 1 có xài được không nha :D
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,682

aviaiva

MasterCorporal
Tham gia
01/03/2016
Bài viết
337
Được Like
276
cái này nó thuộc về css do trình duyệt có hỗ trợ hiển thị hay không mà thôi không liên quan đến xen 1 hay xen 2 chẳng qua là đặt code chưa đúng nên css nó không hoạt động. Nó tương tự với code css hiển thị người online.
 

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]

Nhà Tài Trợ

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