Решено Градиентный ник,не работает

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

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

Зарегистрироваться!
Статус
В этой теме нельзя размещать новые ответы.
Пользователь
Регистрация
7 Июн 2025
Сообщения
33
Столкнулся с такой проблемой,когда пытаюсь сделать градиентный ник,он не переливается

css:
color: yellow;
    font-weight: bold;
    text-shadow: #f00 1px 1px 10px;
    border-raduis: 8px;
    background: linear-gradient(270deg, #ff0, #ff0, #f00, #ff0, #ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 900% 20%;
    color: #1000f2;
    animation: AnimNic 10s ease infinite;

@keyframes AnimBanner {    0% {
        background-position: 0% 50%    }
    50% {
        background-position: 100% 50%    }
    100% {
        background-position: 0% 50%    }
}
 
Решение
𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.
Команда форума
Администратор
Регистрация
21 Янв 2023
Сообщения
1,294
в css-стиль (группы пользователя), мы добавляем только этот код;
в css стиль:
color: yellow;
    font-weight: bold;
    text-shadow: #f00 1px 1px 10px;
    border-raduis: 8px;
    background: linear-gradient(270deg, #ff0, #ff0, #f00, #ff0, #ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 900% 20%;
    color: #1000f2;
    animation: AnimNic 10s ease infinite;

а уже этот код;
в extra.less:
@keyframes AnimBanner {    0% {
        background-position: 0% 50%    }
    50% {
        background-position: 100% 50%    }
    100% {
        background-position: 0% 50%    }
}
мы вставляем в extra.less
 
Пользователь
Регистрация
7 Июн 2025
Сообщения
33
в css-стиль (группы пользователя), мы добавляем только этот код;
в css стиль:
color: yellow;
    font-weight: bold;
    text-shadow: #f00 1px 1px 10px;
    border-raduis: 8px;
    background: linear-gradient(270deg, #ff0, #ff0, #f00, #ff0, #ff0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 900% 20%;
    color: #1000f2;
    animation: AnimNic 10s ease infinite;

а уже этот код;
в extra.less:
@keyframes AnimBanner {    0% {
        background-position: 0% 50%    }
    50% {
        background-position: 100% 50%    }
    100% {
        background-position: 0% 50%    }
}
мы вставляем в extra.less
я так и сделал,просто скинул все в одно
 
𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.
Команда форума
Администратор
Регистрация
21 Янв 2023
Сообщения
1,294
в css стиль:
font-weight: bold;
   background: linear-gradient(270deg, #ff0, #ff0, #f00, #ff0, #ff0);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   background-size: 400% 100%;
   animation: AnimNic 10s ease infinite;
в css стиль

в extra.less:
@keyframes AnimNic {
   0% {
       background-position: 0% 50%;
   }
   50% {
       background-position: 100% 50%;
   }
   100% {
       background-position: 0% 50%;
   }
}
в extra.less
 
𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.
Команда форума
Администратор
Регистрация
21 Янв 2023
Сообщения
1,294
Пользователь
Регистрация
7 Июн 2025
Сообщения
33
Проверил на своем тестовом форуме, все работает. Попробуйте изменить параметр в css-стиле с;
animation: AnimNic 10s ease infinite;
на;
animation: AnimNic 3s ease infinite;
тут изменено время анимации. Должно стать быстрее.
сделал,анимация не показывалась так и не показывается,точнее ее совсем нет
 
𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.
Команда форума
Администратор
Регистрация
21 Янв 2023
Сообщения
1,294
𝚖𝚘𝚛𝚜 𝚌𝚎𝚛𝚝𝚊, 𝚑𝚘𝚛𝚊 𝚒𝚗𝚌𝚎𝚛𝚝𝚊.
Команда форума
Администратор
Регистрация
21 Янв 2023
Сообщения
1,294
Проблема заключалась в том, что у человека отсутствовал нужный код для анимации в extra.less.
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху