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

Thảo luận trong 'Template Modifications' bắt đầu bởi PVS, 14/09/2017.

  • Google checker:
  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    8,983
    Đã được thích:
    6,133
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    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​
     
    Quan tâm nhiều
  2. Demo Pro

    Demo Pro Thượng Đế

    Tham gia:
    25/07/2017
    Bài viết:
    40
    Đã được thích:
    16
    Điểm thành tích:
    8
    Giới tính:
    Nam
    chỉ được mỗi xenforo 2 thôi à anh :D @PVS
     
  3. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    8,983
    Đã được thích:
    6,133
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    ừ 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
     
    Demo Pro thích bài này.
  4. Demo Pro

    Demo Pro Thượng Đế

    Tham gia:
    25/07/2017
    Bài viết:
    40
    Đã được thích:
    16
    Điểm thành tích:
    8
    Giới tính:
    Nam
    ừ để em test :p
     
  5. Demo Pro

    Demo Pro Thượng Đế

    Tham gia:
    25/07/2017
    Bài viết:
    40
    Đã được thích:
    16
    Điểm thành tích:
    8
    Giới tính:
    Nam
    ko được :v
     
    PVS thích bài này.
  6. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    8,983
    Đã được thích:
    6,133
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    SV
    Nơi ở:
    Huế
    hii :)
     
  7. aviaiva

    aviaiva Thượng Đế

    Tham gia:
    01/03/2016
    Bài viết:
    321
    Đã được thích:
    258
    Điểm thành tích:
    63
    Nơi ở:
    hn
    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.
     

Chia sẻ trang này

Đang tải...