Анимированный индикатор онлайн пользователя

индикатор онлайн пользователя

  1. Tretyak44
    Совместимость с XenForo:
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    323232.JPG В шаблон Extra.css добавляем следующий код:



    Код:
    messageUserBlock div.avatarHolder .onlineMarker
    {
          display: inline-block;
          width: 16px;
          height: 16px;
    /*        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: #7fb900;
            border-color: #7fb900;
            border-radius: 50%
    }
    
    .messageUserBlock div.avatarHolder .onlineMarker:after {
            content: '';
            position: absolute;
            width: 32px;
            height: 32px;
            margin: -9px 0 0 -9px;
            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: .7} 100% {opacity: 0;transform: scale(1)}
    }[/CODE
    
    ]
    
    [ATTACH]8437[/ATTACH]
Поделиться этой страницей в