Решено css переливающийся RGB ник

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

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

Зарегистрироваться!
  • Если Вы желаете помогать развитию проекта, готовы заполнять раздел(-ы) и подсказывать другим пользователям на портале, есть возможность попасть в команду редакторов. Для этого следует обратиться в техническую поддержку
Статус
В этой теме нельзя размещать новые ответы.
Решение
в CSS ника:
background: linear-gradient(45deg, #0c6a0c 25%, #15c115 0, #15c115 50%, #0c6a0c 0, #0c6a0c 75%, #15c115 0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
color: #1000f2;
animation: AnimNic 3s linear infinite;

extra.less:
@keyframes AnimNic {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}

Результат

OFFTOP

На будущее. Вариаций анимации и цветов бесконечное множество, всё зависит от фантазии и умения играться с CSS правильно

Пользователь
Регистрация
5 Июл 2025
Сообщения
5
В настройку CSS ника группы это

CSS:
background: linear-gradient(270deg, #0c6a0c, #15c115);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 900% 20%;
color: #1000f2;
animation: AnimNic 2s ease infinite;

в экстру это
CSS:
@keyframes AnimNic {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

получаем это
 
Пользователь
Регистрация
1 Май 2025
Сообщения
23
В настройку CSS ника группы это

CSS:
background: linear-gradient(270deg, #0c6a0c, #15c115);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 900% 20%;
color: #1000f2;
animation: AnimNic 2s ease infinite;

в экстру это
CSS:
@keyframes AnimNic {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

получаем это
Большое спасибо! А если прямо переливание, а не свечение?
 
Пользователь
Регистрация
5 Июл 2025
Сообщения
5
в CSS ника:
background: linear-gradient(45deg, #0c6a0c 25%, #15c115 0, #15c115 50%, #0c6a0c 0, #0c6a0c 75%, #15c115 0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
color: #1000f2;
animation: AnimNic 3s linear infinite;

extra.less:
@keyframes AnimNic {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}

Результат

OFFTOP

На будущее. Вариаций анимации и цветов бесконечное множество, всё зависит от фантазии и умения играться с CSS правильно

 

Вложения

  • 235.gif
    235.gif
    80.3 KB · Просмотры: 7
Пользователь
Регистрация
1 Май 2025
Сообщения
23
в CSS ника:
background: linear-gradient(45deg, #0c6a0c 25%, #15c115 0, #15c115 50%, #0c6a0c 0, #0c6a0c 75%, #15c115 0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
color: #1000f2;
animation: AnimNic 3s linear infinite;

extra.less:
@keyframes AnimNic {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}

Результат

OFFTOP

На будущее. Вариаций анимации и цветов бесконечное множество, всё зависит от фантазии и умения играться с CSS правильно

Благодарю. И огромное спасибо за результаты.
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху