Решено Свечение и анимированная рамка вокруг аватаров?

[Sidd]

Здравствуйте, есть ли простое решение для реализации подобного?) Увидел на этом форуме

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Skaiman]

На других аватарах так же? Это скорее всего ава так сделана

 

[Sidd]

На других аватарах так же? Это скорее всего ава так сделана

Это не просто картинка, вот как это выглядит у него в профиле :



на админских аватарках там у всех свечение+ рамка

 

[Skaiman]

На фоне значит гифка, а свечение аватаров, тень, красная, зеленая, описано на форуме, поиском воспользуйся

 

[ЦукерОо]

Таким образом подсвечивается Команда форума.
Пользователь стардаст взят от сюда:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Ищи в старых темах, был даже гайд.

 

[Sidd]

Спасибо, поищу

 

[Skaiman]

/* --------------- свечение ------------ */

.messageUserBlock h3.userText {
margin-top:5px;
}

html .messageUserBlock div.avatarHolder .onlineMarker {
    border: 5px solid transparent;
    border-top-color: #76a215;
    border-left-color: #76a215;
}

.messageUserBlock div.avatarHolder .onlineMarker {
z-index:4;
}

.luxury .avatarHolder,
.premium .avatarHolder,
li[data-author="Stardust"] .avatarHolder,
li[data-author="DanielDefo"] .avatarHolder {
    display: block;
    position: relative;
    animation-duration:5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

/* remove anim */
    html.Touch li.luxury .avatar:after,
    html.Touch li.premium .avatar:after,
    html.Touch li[data-author="Stardust"] .avatar:after,
    html.Touch li[data-author="DanielDefo"] .avatar:after,
    html.Touch li.luxury .avatar:before,
    html.Touch li.premium .avatar:before,
    html.Touch li[data-author="Stardust"] .avatar:before,
    html.Touch li[data-author="DanielDefo"] .avatar:before
        {
        animation-name: none;
        }

/* color */     
        .luxury .avatarHolder {
            -webkit-box-shadow: 0px 0px 30px 0px rgba(42,208,171,0.4); -moz-box-shadow: 0px 0px 30px 0px rgba(42,208,171,0.4); -khtml-box-shadow: 0px 0px 30px 0px rgba(42,208,171,0.4); box-shadow: 0px 0px 30px 0px rgba(42,208,171,0.4);
            animation-name: shineBackEmerald;
        }
        
        .premium .avatarHolder {
            -webkit-box-shadow: 0px 0px 30px 0px rgba(255, 215, 138, 0.4); -moz-box-shadow: 0px 0px 30px 0px rgba(255, 215, 138, 0.4); -khtml-box-shadow: 0px 0px 30px 0px rgba(255, 215, 138, 0.4); box-shadow: 0px 0px 30px 0px rgba(255, 215, 138, 0.4);
            animation-name: shineBackYellow;
        }

        li[data-author="Stardust"] .avatarHolder,
        li[data-author="DanielDefo"] .avatarHolder {
            -webkit-box-shadow: 0px 0px 30px 0px rgba(247,52,52,0.5); -moz-box-shadow: 0px 0px 30px 0px rgba(247,52,52,0.5); -khtml-box-shadow: 0px 0px 30px 0px rgba(247,52,52,0.5); box-shadow: 0px 0px 30px 0px rgba(247,52,52,0.5);
            animation-name: shineBackRed;
        }
    
        html.Touch .luxury .avatarHolder,
        html.Touch .premium .avatarHolder,
        html.Touch li[data-author="Stardust"] .avatarHolder,
        html.Touch li[data-author="DanielDefo"] .avatarHolder {
            animation-name: none;
            }
        
        @keyframes shineBackYellow {
            0%{-webkit-box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); -moz-box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); -khtml-box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); }
            50%{-webkit-box-shadow: 0px 0px 40px 0px  rgba(252, 213, 125, 0.5); -moz-box-shadow: 0px 0px 40px 0px  rgba(252, 213, 125, 0.5); -khtml-box-shadow: 0px 0px 40px 0px  rgba(252, 213, 125, 0.5); box-shadow: 0px 0px 40px 0px  rgba(252, 213, 125, 0.5); }
            100%{-webkit-box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); -moz-box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); -khtml-box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); box-shadow: 0px 0px 20px 0px  rgba(252, 213, 125, 0.1); }
        }
        
        @keyframes shineBackRed {
            0%{-webkit-box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); -moz-box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); -khtml-box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); }
            50%{-webkit-box-shadow: 0px 0px 40px 0px  rgba(247,52,52,0.7); -moz-box-shadow: 0px 0px 40px 0px  rgba(247,52,52,0.7); -khtml-box-shadow: 0px 0px 40px 0px  rgba(247,52,52,0.7); box-shadow: 0px 0px 40px 0px  rgba(247,52,52,0.7); }
            100%{-webkit-box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); -moz-box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); -khtml-box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); box-shadow: 0px 0px 20px 0px  rgba(247,52,52,0.5); }
        }
        
        @keyframes shineBackEmerald {
            0%{-webkit-box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); -moz-box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); -khtml-box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); }
            50%{-webkit-box-shadow: 0px 0px 40px 0px  rgba(42,208,171,0.7); -moz-box-shadow: 0px 0px 40px 0px  rgba(42,208,171,0.7); -khtml-box-shadow: 0px 0px 40px 0px  rgba(42,208,171,0.7); box-shadow: 0px 0px 40px 0px  rgba(42,208,171,0.7); }
            100%{-webkit-box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); -moz-box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); -khtml-box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); box-shadow: 0px 0px 20px 0px  rgba(42,208,171,0.5); }
        }
        
        

@media (max-width: 480px) {
    .Responsive .luxury .avatarHolder,
    .Responsive .premium .avatarHolder,
    .Responsive li.message[data-author="Stardust"] .avatarHolder,
    .Responsive li.message[data-author="DanielDefo"] .avatarHolder {
        padding:0;
        width:auto;
        height:auto;
        margin-top: 8px;
            margin-left: 8px;
            -webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px;
     }
    
     .Responsive .luxury .avatar,
     .Responsive .premium .avatar,
     .Responsive li[data-author="Stardust"] .avatar,
     .Responsive li[data-author="DanielDefo"] .avatar {
         -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;     
    }   
}

li.message.luxury .avatarHolder,
li.message.premium .avatarHolder,
li.message[data-author="Stardust"] .avatarHolder,
li.message[data-author="DanielDefo"] .avatarHolder {
    margin:0 auto;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
    }

li.messageSimple.luxury .avatarHolder,   
li.messageSimple.premium .avatarHolder,   
li.messageSimple[data-author="Stardust"] .avatarHolder,
li.messageSimple[data-author="DanielDefo"] .avatarHolder {
    float: left;
    margin-top: 6px;
    -webkit-border-radius: 6px; -moz-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
}


li.messageSimple.luxury .avatar,
li.messageSimple.premium .avatar,
li.messageSimple[data-author="Stardust"] .avatar,
li.messageSimple[data-author="DanielDefo"] .avatar,
html .discussionListItem.luxury .posterAvatar .avatar,
html .discussionListItem.premium .posterAvatar .avatar,
html .discussionListItem[data-author="Stardust"] .posterAvatar .avatar,
html .discussionListItem[data-author="DanielDefo"] .posterAvatar .avatar {
    padding: 1px;
}

html .discussionListItem.luxury .posterAvatar .avatar,
html .discussionListItem.premium .posterAvatar .avatar,
html .discussionListItem[data-author="Stardust"] .posterAvatar .avatar,
html .discussionListItem[data-author="DanielDefo"] .posterAvatar .avatar {
    margin:3px;
}

html .discussionListItem.luxury .posterAvatar .avatar.miniMe,
html .discussionListItem.premium .posterAvatar .avatar.miniMe,
html .discussionListItem[data-author="Stardust"] .posterAvatar .avatar.miniMe,
html .discussionListItem[data-author="DanielDefo"] .posterAvatar .avatar.miniMe {
    bottom: -15px;
        left: 22px;
}

li.luxury .avatar,
li.premium .avatar,
li[data-author="Stardust"] .avatar,
li[data-author="DanielDefo"] .avatar {
    position: relative;
    float: left;
    display: block;
    padding: 2px;
    margin: 0;   
    z-index: 1;
    overflow: hidden;
    -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px
}

li.luxury .avatar img,
li.premium .avatar img,
li[data-author="Stardust"] .avatar img,
li[data-author="DanielDefo"] .avatar img {
    position: relative;
    margin: 0;
    padding: 0;   
    z-index: 3;
}

li.luxury .avatar:after,
li.premium .avatar:after,
li[data-author="Stardust"] .avatar:after,
li[data-author="DanielDefo"] .avatar:after {
  z-index: 2;
  content: "";
  position: absolute;
  top: -25%;
  left: 150%;
  width:  55%;
  height: 150%;
  opacity: 1;
  -webkit-transform:  rotate(30deg); -moz-transform:  rotate(30deg); -o-transform:  rotate(30deg); -ms-transform:  rotate(30deg);transform: rotate(30deg);
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.0) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.0) 100% );
  animation-name: shineMove;
  animation-duration:5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

/* color */     
        
        
        li[data-author="Stardust"] .avatar {
            background:#2f3644;
        }
        
        li[data-author="DanielDefo"] .avatar {
            background: #bd1919;
        }
        
        li.luxury .avatar {
            background: rgb(42, 208, 171);
        }

        li.premium .avatar {
            background: #b2904f;
        }



/*
.luxury .avatar:before,
.premium .avatar:before,
li[data-author="Stardust"] .avatar:before,
li[data-author="DanielDefo"] .avatar:before {
    z-index: 2;
    content: "";
    position: absolute;
    top: -25%;
    left: 150%;
    width:  100%;
    height: 150%;
    opacity: 1;
    -webkit-transform:  rotate(30deg); -moz-transform:  rotate(30deg); -o-transform:  rotate(30deg); -ms-transform:  rotate(30deg);transform: rotate(30deg);
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.0) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.0) 100% );
    mix-blend-mode: overlay;
    animation-name: shineMove;
    animation-duration:8s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    
}
*/

@keyframes shineMove {
    0% {    -webkit-transform:  translateX(-500%) ; -moz-transform:  translateX(-500%) ; -o-transform:  translateX(-500%) ; -ms-transform:  translateX(-500%) ;transform: translateX(-500%) };
    100% {    -webkit-transform:  translateX(1000%) ; -moz-transform:  translateX(1000%) ; -o-transform:  translateX(1000%) ; -ms-transform:  translateX(1000%) ;transform: translateX(1000%) }
    
    /*
    0% {    -webkit-transform:  translateX(-500px) ; -moz-transform:  translateX(-500px) ; -o-transform:  translateX(-500px) ; -ms-transform:  translateX(-500px) ;transform: translateX(-500px) };
    100% {    -webkit-transform:  translateX(800px) ; -moz-transform:  translateX(800px) ; -o-transform:  translateX(800px) ; -ms-transform:  translateX(800px) ;transform: translateX(800px) }
    
    0% { left:-200% };
    100%{left: 1000%};
    */
}


/*----- /свечение -----*/

не гифка там на фоне, анимация css

 

[Sidd]

Спасибо) получилось =)



теперь нужно с размерами рамок и аватарки играться)