Помогите пофиксить

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
Пользователь
Регистрация
7 Июл 2025
Сообщения
88
Крч мне надо помочь сделать так чтоб когда переливалась нужна чтоб иконка крутилась и замазывалась сразу поможете пожалуйста? https://vk.com/wall-232053893_1
 
Решение
@Icecombat, вообщем сам пробовал и ИИ использовал и это единственное, что получилось:
Less:
.username--style3:before{
font-family:"Font Awesome 5 Pro";
content:"\f71d";
font-weight:600;
padding-right:1px;
display:inline-block;
transition: transform 0.8s ease-in-out, filter 0.8s ease-in-out;
filter: blur(0px);
}
.username--style3:hover:before {
transform: rotate(360deg);
filter: blur(5px);
}
.username--style3.rotation-finished:before {
filter: blur(0px);
}
Пояснение: сначала иконка видна хорошо, но при нажатии на неё она затемняется и крутится. Она докручивается и остаётся затемнённой. Но если нажать куда-нибудь по экрану, то иконка делает круг в противоположную сторону, то есть назад и становится чёткой.
Это всё что смог...
Пользователь
Регистрация
7 Июл 2025
Сообщения
88
.username--style20:before {
font-family: "Font Awesome 5 Pro";
content: "\f4d8";
font-weight: 600;
padding-right: 1px;
display: inline-block;
}
.username--style20:hover:before {
display: inline-block;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transition: all 0.8s;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
}
 
Пользователь
Регистрация
7 Июл 2025
Сообщения
88
Пользователь
Регистрация
7 Июл 2025
Сообщения
88
.username--style20:before {
font-family: "Font Awesome 5 Pro";
content: "\f521";
font-weight: 600;
padding-right: 1px;
display: inline-block; backface-visibility: hidden;
}
.username--style20:hover:before {
display: inline-block; backface-visibility: hidden;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transition: all 0.8s;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
}
 
Сверху