Комментарий #9584944

animeshnik_ALT
gif ава + анимация при наведении + box shadow
скрин
старый способ (не лучший)
/*Отключаем видимость аватарки + на странице списков*/
#profiles_show .profile-head .c-brief .avatar img/*, .p-user_rates-index .l-menu .avatar img*/ {
  visibility: hidden;
}

/*GIF ава + на странице списков */
#profiles_show .profile-head .c-brief .avatar/*, .p-user_rates-index .l-menu .avatar*/ {
  background: url("https://media.tenor.com/images/836f0d117e634c0159bc6feebb1a233e/tenor.gif");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  transition: 1s; /*время анимации*/
  box-shadow: none;
    animation-name: gradient;/*box-shadow-animation;*/
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
  pointer-events: all;
}
.p-user_rates-index .l-menu .avatar img {
  transition: 1s;
  box-shadow: none;
    animation-name: gradient;/*box-shadow-animation;*/
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
  pointer-events: all;
}

/*Наведение на аву(гифку) + на странице списков*/
#profiles_show .profile-head .c-brief .avatar:hover, .p-user_rates-index .l-menu .avatar img:hover {
  transition: 1s;
  border-radius: 0;
  transform: unset;
}

@keyframes gradient {
  0% {box-shadow:0 0 20px 10px #ff0000}
    12.5% {box-shadow:0 0 20px 10px #ff7300}
    25% {box-shadow:0 0 20px 10px #fffb00}
    37.5% {box-shadow:0 0 20px 10px #48ff00}
    50% {box-shadow:0 0 20px 10px #00ffd5}
    62.5% {box-shadow:0 0 20px 10px #002bff}
    75% {box-shadow:0 0 20px 10px #7a00ff}
    87.5% {box-shadow:0 0 20px 10px #ff0000}
    100% {box-shadow:0 0 20px 10px rgb(60,208,131)}
}
Аватарка меняется в профиле, на странице аниме/манга списков и в открывающемся меню.
#profiles_show .profile-head .c-brief .avatar img, .p-user_rates-index .l-menu .avatar img, body[data-user*='{"id":ваш-ID,'] .l-top_menu-v2 .menu-dropdown.profile>span img, span.submenu-triangle.icon-avatar img {
  content: url("https://media.tenor.com/images/836f0d117e634c0159bc6feebb1a233e/tenor.gif");
}
#profiles_show .profile-head .c-brief .avatar img, .p-user_rates-index .l-menu .avatar img {
  box-shadow: none;
  transition: 1s;
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  pointer-events: all;
}
#profiles_show .profile-head .c-brief .avatar img:hover, .p-user_rates-index .l-menu .avatar img:hover {
  transition: 1s;
  border-radius: 0;
  transform: unset;
}
@keyframes gradient {
  0% {box-shadow:0 0 20px 10px #ff0000}
    12.5% {box-shadow:0 0 20px 10px #ff7300}
    25% {box-shadow:0 0 20px 10px #fffb00}
    37.5% {box-shadow:0 0 20px 10px #48ff00}
    50% {box-shadow:0 0 20px 10px #00ffd5}
    62.5% {box-shadow:0 0 20px 10px #002bff}
    75% {box-shadow:0 0 20px 10px #7a00ff}
    87.5% {box-shadow:0 0 20px 10px #ff0000}
    100% {box-shadow:0 0 20px 10px rgb(60,208,131)}
}
Ответы

Нет комментариев

назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть