Среда, 20.06.2018, 08:35
Главная Регистрация RSS
Приветствую Вас, Гость
НОВОЕ НА ФОРУМЕ
НОВЫЕ КОМЕНТАРИИ
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Нас сегодня посетили :
mytorrento
Поиск
Главная » Файлы » СКРИПТЫ ДЛЯ UCOZ » РАЗНЫЕ СКРИПТЫ УКОЗ

Вращающаяся аватара

Вращающаяся аватара

Вращающаяся аватар при наведении курсора украсит ваш сайт.
В CSS самый низ

Код

/*------------- by mytorrnado.com ---------------*/
   
@-webkit-keyframes flip {
  0% {
  -webkit-transform: translateZ(0) rotateY(0) scale(1);
  -webkit-animation-timing-function: ease-out;
  }
  40% {
  -webkit-transform: translateZ(150px) rotateY(170deg) scale(1);
  -webkit-animation-timing-function: ease-out;
  }
  50% {
  -webkit-transform: translateZ(150px) rotateY(190deg) scale(1);
  -webkit-animation-timing-function: ease-in;
  }
  80% {
  -webkit-transform: translateZ(0) rotateY(360deg) scale(.95);
  -webkit-animation-timing-function: ease-in;
  }
  100% {
  -webkit-transform: translateZ(0) rotateY(360deg) scale(1);
  -webkit-animation-timing-function: ease-in;
  }
}
@-moz-keyframes flip {
  0% {
  -moz-transform: translateZ(0) rotateY(0) scale(1);
  -moz-animation-timing-function: ease-out;
  }
  40% {
  -moz-transform: translateZ(150px) rotateY(170deg) scale(1);
  -moz-animation-timing-function: ease-out;
  }
  50% {
  -moz-transform: translateZ(150px) rotateY(190deg) scale(1);
  -moz-animation-timing-function: ease-in;
  }
  80% {
  -moz-transform: translateZ(0) rotateY(360deg) scale(.95);
  -moz-animation-timing-function: ease-in;
  }
  100% {
  -moz-transform: translateZ(0) rotateY(360deg) scale(1);
  -moz-animation-timing-function: ease-in;
  }
}
@-o-keyframes flip {
  0% {
  -o-transform: translateZ(0) rotateY(0) scale(1);
  -o-animation-timing-function: ease-out;
  }
  40% {
  -o-transform: translateZ(150px) rotateY(170deg) scale(1);
  -o-animation-timing-function: ease-out;
  }
  50% {
  -o-transform: translateZ(150px) rotateY(190deg) scale(1);
  -o-animation-timing-function: ease-in;
  }
  80% {
  -o-transform: translateZ(0) rotateY(360deg) scale(.95);
  -o-animation-timing-function: ease-in;
  }
  100% {
  -o-transform: translateZ(0) rotateY(360deg) scale(1);
  -o-animation-timing-function: ease-in;
  }
}
@keyframes flip {
  0% {
  transform: translateZ(0) rotateY(0) scale(1);
  animation-timing-function: ease-out;
  }
  40% {
  transform: translateZ(150px) rotateY(170deg) scale(1);
  animation-timing-function: ease-out;
  }
  50% {
  transform: translateZ(150px) rotateY(190deg) scale(1);
  animation-timing-function: ease-in;
  }
  80% {
  transform: translateZ(0) rotateY(360deg) scale(.95);
  animation-timing-function: ease-in;
  }
  100% {
  transform: translateZ(0) rotateY(360deg) scale(1);
  animation-timing-function: ease-in;
  }
}
   
.animated.flip {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flip;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flip;
  -o-backface-visibility: visible !important;
  -o-animation-name: flip;
  backface-visibility: visible !important;
  animation-name: flip;
}
.animated {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}
   
.animated.hinge {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}

Находим что то вроде этого

 

Код

<a href="$PERSONAL_PAGE_LINK$" title="Посмотреть профиль"><img src="$USER_AVATAR_URL$"></a>

и заменяем на

 

Код

<tr onMouseOver="this.className='flip animated';" onmouseout="this.className='';">
  <td align="center"><a href="$PERSONAL_PAGE_LINK$" title="Посмотреть профиль"><img src="$USER_AVATAR_URL$"></a></td>
  </tr>  

Демка видна после регистрации.

 

ПОСМОТРЕТЬ ДЭМО ВЕРСИЮ

К материалу оставили ссылку на демоверсию, по которой вы можете оценить функционал данного материала. При обнаружении ссылки, не содержашей демоверсии, сообщите об этом Администратору.

Похожие материалы:

Категория: РАЗНЫЕ СКРИПТЫ УКОЗ | Добавил: mytorrento | Теги: вращающаяся, аватара, РАЗНЫЕ СКРИПТЫ УКОЗ
Просмотров: 323 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
avatar