Jump to content

"Вращающиеся" аватарки при наведении

Featured Replies

Это тема поддержки статьи: "Вращающиеся" аватарки при наведении.

Здесь вы можете обсудить все вопросы, связанные с этой статьёй.

 

Дата добавления статьи: 06 Март 2014 - 20:52

Дата обновления статьи: 06 Март 2014 - 20:52

Link to comment
https://ipbmafia.ru/topic/7402-vrashayushiesya-avatarki-pri-navedenii/
Share on other sites

Это конечно хорошо, для новичков действительно нужная вещь.

Не получилось .. :shake: 

для этого над чтобы у тебя рук не было

Можно так сделать:

.avatar
{ display: block; width: 30%; height: 35%; position: relative; z-index: 10;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}



			

			
		

 

Можно так сделать:

.avatar
{ display: block; width: 30%; height: 35%; position: relative; z-index: 10;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

Recouse, добавь в статью, действительно хорошая вещь

RealUser, можно много примеров привести. Этот самый простой код, который мне в голову пришел.

 

Можно так сделать:

.avatar
{ display: block; width: 30%; height: 35%; position: relative; z-index: 10;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

И что это забред младенца?

Mattko, мда... Ну-ка объясните, почему бред? Интересно стало.

Не вижу в данной статье абсолютно никакой полезности. С таким успехом можно по каждому css3 правилу написать отдельную статью. Бред вообще какой-то. без обид.

Respected, да не я привык )) Это для полных нубов

Не получилось .. :shake: 

Вы хромом или оперой пользуетесь? Если да, то дело в том, что они поддерживают описанное в статье только с блочными элементами (т.е. если не работает, то надо добавить "display:block")

 

для этого над чтобы у тебя рук не было

ИМХО, ответ немного некорректен, т.к. Вы забыли или не знали написать об этом недостатке, даже если дело не в нём. :)

Edited by SUAMF

Вы хромом или оперой пользуетесь? Если да, то дело в том, что они поддерживают описанное в статье только с блочными элементами (т.е. если не работает, то надо добавить "display:block")

 

ИМХО, ответ немного некорректен, т.к. Вы забыли или не знали написать об этом недостатке, даже если дело не в нём. :)

у меня на всех браузерах работает

  • 6 месяцев спустя...

подскажите пожалуйста как сделать чтобы в чате, профиле и теме крутились?

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

а там между {} тоже самое вставлять?  и это все меняется в  ipb_styles.css?

 -moz-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

-moz-transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

o-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

transform: rotate(-360deg);

Edited by Svenson

кто нибудь сможет подсказать где искать:

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

 

и что нужно вставлять туда?

кто нибудь сможет подсказать где искать:

В чате: .ipsUserPhoto_icon

Теме: .ipsUserPhoto.ipsUserPhoto_variable

Профиле: img#profile_photo

 

и что нужно вставлять туда?

Что сложного?

Добавляете указанные селекторы к 

.ipsUserPhotoLink:hover
.ipsUserPhoto {
Будет так 

.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo,
.ipsUserPhotoLink:hover
.ipsUserPhoto {

вставил вот так:

 

.ipsUserPhotoLink:hover
.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo,
.ipsUserPhoto {
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
 
но почему то не работает

Edited by Svenson

Обманул.

Нужно добавить псевдокласс hover
 

Вместо 

.ipsUserPhoto_icon,
.ipsUserPhoto.ipsUserPhoto_variable,
img#profile_photo

будет 

.ipsUserPhoto_icon:hover,
.ipsUserPhoto.ipsUserPhoto_variable:hover,
img#profile_photo:hover

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

разобрался сам, спс за подсказки

  • 7 years later...

Я извиняюсь а в 2021 году как это реализовать?)) и еще видел у кого то как разделы форум на котором разделы форумом тоже анимированы при наведение на них. 

18 минут назад, saiko сказал:

как разделы форум на котором разделы форумом

убейте меня уже.. 

Desti да пока писал чето мысль видать потерял xD разделы форума анимированы тоже, имел ввиду xD

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.