Tạo hiệu ứng chuyển động đẹp cho Online Status Xenforo

Online Status hiển thị tình trạng online của thành viên trên diễn đàn, mặc định nó chỉ là 1 dấu nhỏ nằm ở góc avatar trông khá là đơn điệu, hôm nay mình sẽ hướng dẫn các bạn tạo thêm hiệu ứng chuyển động kiểu phát sáng tỏa ra trông bắt mắt hơn rất là nhiều, và cũng cực kỳ đơn giản.

Mặc định chỉ đơn giản thế này​

Sau khi thêm hiệu ứng thì các bạn có thể xem video demo dưới đây để thấy được hiệu ứng:

Việc đơn giản các bạn cần chỉ là copy đoạn code css sau đây vào template EXTRA. css

Code:

.messageUserBlock div.avatarHolder .onlineMarker
{
    display: inline-block;
    width: -62px;
    height: px;
/*    margin: 9px 0 0 9px; <- if you'd like it on top left */
    margin: 79px 0 0 79px;
    background: #fff;
    border: none!important;
    border-radius: 50%!important
}
   
.messageUserBlock div.avatarHolder .onlineMarker:before
{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 3px 0 0 3px;
    background: #BD0101;
    border-radius: 50%
}

.messageUserBlock div.avatarHolder .onlineMarker:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 8px solid #BD0101;
    border-radius: 50%;
    box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
    -webkit-transform: scale(0);
    -webkit-animation: 
	
online 2.5s ease-in-out infinite;
    animation: 
	
online 2.5s ease-in-out infinite
}

@-webkit-keyframes 
	
online
{
      0% {opacity: 1;-webkit-transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;-webkit-transform: scale(1)}
}

@keyframes 
	
online
{
      0% {opacity: 1;transform: scale(0)}
     50% {opacity: .7}
    100% {opacity: 0;transform: scale(1)}
} 

Đoạn css trên đã được mình tùy chỉnh lại màu sắc, vị trí và hiệu ứng phát sáng theo ý thích của mình để phù hợp với diễn đàn Việt Designer, các bạn có thể tùy chỉnh lại theo ý thích của mình theo thông số của đoạn css trên, còn vị trí thì các bạn tùy chỉnh ở template message_user_info. css nhé, chúc các bạn thành công