Пульсирующее свечение вокруг аватара

Пульсирующее свечение вокруг аватара

  1. Next
    Совместимость с XenForo:
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    Пульсирующее свечение вокруг аватара.

    Внимание: работает только с браузером FireFox



    В шаблон EXTRA.CSS добавляем:

    Код:
         .messageUserBlock div.avatarHolder .onlineMarker
        {
            display: inline-block;
            width: 0px;
            height: 0px;
        /*    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:after
        {
            content: '';
            position: absolute;
            width: 100px;
            height: 100px;
            margin: -80px 0 0 -80px;
            border: 3px solid #7fb900;
            border-radius: 50%;
            box-shadow: 0 0 4px #7fb900, inset 0 0 4px #7fb900;
            -webkit-transform: scale(0);
            -webkit-animation: online 1.5s ease-in-out infinite;
            animation: online 1.5s ease-in-out infinite
        }
    
        @-webkit-keyframes online
        {
    
            100% {opacity: 0;-webkit-transform: scale(1)}
        }
    
        @keyframes online
        {
    
            100% {opacity: 0;transform: scale(1)}
        }
    
        .avatar img,
        .avatar .img,
        .avatarCropper {
        border-radius: 50px !important;
        }
    
Поделиться этой страницей в