Tutorial 2x Animated online indicator - Chỉ báo trực tuyến hoạt ảnh cho XenForo 2.2

[PVS]

Animated online indicator - Chỉ báo trực tuyến hoạt ảnh cho XenForo 2.2

Một hoạt ảnh đơn giản cho chỉ báo thành viên trực tuyến

Trong template extra.less, hãy thêm cái này:

.message-avatar-online:after
{
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -7px 0 0 -26px;
    border: 1px solid #7fb900;
    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: .5}
    100% {opacity: 0;transform: scale(1)}
}

Kết quả:

​

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

Nguồn: xenforo.com​