Name: Animated online indicator
Availability: InStock
Author: axtona

概览历史讨论

XF 兼容性

2.2.x

摘要: A simple animated online member indicator added to your project with ease using extra.less. Enhance user experience with smooth, scalable animations.

Animated online indicator
____________________________________

A simple animation on the online member indicator 😉

In extra.less template, add this:

CSS：

.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)}
}