Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!

Решено 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 правильно

Июл
716
984
Пользователь
В настройку 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%}
}

получаем это
 
Май
863
354
Пользователь
В настройку 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%}
}

получаем это
Большое спасибо! А если прямо переливание, а не свечение?
 
Июл
716
984
Пользователь
в 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 · Просмотры: 36
Май
863
354
Пользователь
в 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 правильно

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