Анимированный ник с градиентом

Мануал 2.x Анимированный ник с градиентом

Анимируем градиентный ник.
  • Автор темы SOUL
  • Дата создания

SOUL

Создатель
Сообщения
7 914
Репутация
11 213
Баллы
266
SOUL разместил(а) новый ресурс:

Анимированный ник с градиентом - Анимируем градиентный ник.

Инструкция ниже о том, как анимировать градиентный ник.

Пример:


В настройках группы для имени пользователя:

Код:
background: linear-gradient(270deg, #01bf3b, #1000f2, #ff00ea);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 900% 20%;
color: #1000f2;
animation: AnimNic 10s ease infinite;
В extra.less

Less:
@keyframes AnimNic {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}...
Посмотреть страницу этого ресурса...
 

Rscasino

Пользователь
Сообщения
1
Репутация
0
Баллы
1
А можно более подробно? для чайников конкретных..
 

booka

Пользователь
Сообщения
2
Репутация
0
Баллы
1
я сделал в экстра вот так:


.username[data-user-id="1"] {
[class^="username"] {
background: #263238;
background: linear-gradient(to right, #FFF 33%, #304FFE 33%, #304FFE 66%, #DD2C00 66%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 80px 80px;
color: #304FFE;
animation: AnimNic 30s ease infinite;
/* Конец кода для ника */
/* Код анимации в extra.less */
}
}
@keyframes AnimNic {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}


Но почему то притормаживает
 

booka

Пользователь
Сообщения
2
Репутация
0
Баллы
1
Не слишком большое время? А код надо в тегах делать.
я просто скопировал проверить, впервые с движком работаю, добавлять везде не хотелось , все запихнул в лес, работало но медленно :D, теперь понял про 30сек
 

KILUCK

Проверенный
Сообщения
29
Репутация
2
Баллы
3
Skaiman есть эффекты поинтереснее ? Желательно с убойным ховер эффектом
 

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 635
Репутация
6 577
Баллы
266
Хотя б читал внимательно :) Все это ерунда, для малолетних какеров :)
 

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 635
Репутация
6 577
Баллы
266
Мега кодер с джавки перенести на ксс код не может?
Ну я не когда не заявлял, что являюсь мега кодером :) во вторых, не все можно сделать средствами css, для этого и есть JavaScript, jQuery, а в тритих, как уже сказал, это не очень подходит для ников на нормальном форуме :) как и все моргалки, блестяшки, переливалки :)
 

KILUCK

Проверенный
Сообщения
29
Репутация
2
Баллы
3
нормальном форуме
У меня неформальный форум
Ну я не когда не заявлял, что являюсь мега кодером
Таков ваш образ
не все можно сделать средствами css
Анрил

Пожалуйста, Войдите или Зарегистрируйтесь для просмотра скрытого текста.

 

Skaiman

[SVG]ADD-ONS ™
Администратор
Сообщения
6 635
Репутация
6 577
Баллы
266
Анрил

Пожалуйста, Войдите или Зарегистрируйтесь для просмотра скрытого текста.

Ну так и прекрасно, я изначально сказал, что поиск всегда поможет :) не понятно к чему надо было разводить холивар :) да и создавать для себя какие то невероятные образы :)
 
Сверху Снизу