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

[PVS]

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.

​

Thêm đoạn code sau vào template extra.less:

/* 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:

<span class="p-navgroup-linkText">{{ phrase('register') }}</span>

Thay bằng:

<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​

 

[Demo Pro]

chỉ được mỗi xenforo 2 thôi à anh @PVS

 

[PVS]

chỉ được mỗi xenforo 2 thôi à anh @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

 

[Demo Pro]

ừ 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

ừ để em test

 

[Demo Pro]

ko được :v

 

[PVS]

hii

 

[aviaiva]

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.