Четверг, 17.01.2019, 05:31
Главная Регистрация RSS
Приветствую Вас, Гость
НОВЫЕ КОМЕНТАРИИ
Тема: Где скачать UTHEMES ??
Ник: ياسين
Тема: молодец

--- ...
Тема: Требуется администратор д...
Ник: mytorrento
Статистика

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

Нас сегодня посетили :
Поиск
Главная » Файлы » СКРИПТЫ ДЛЯ 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 | Теги: вращающаяся, аватара, РАЗНЫЕ СКРИПТЫ УКОЗ
Просмотров: 340 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Все смайлы
Код *: