XF 2.1 Криво встает Анимированный Баннер

[Wayne_Deep]

Всем, привет. Вот такая проблема: Вставил код в котором должен быть баннер Градиент + Анимированный, как должно быть -

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

. Как получилось - Все изображения и файлы загружаем на наш сервер!
можете сказать в чем проблема, и что я сделал не-так?

Вот код:

.userBanner.spec {
    background: linear-gradient(124deg, #33f, #0ff, #33f, #1f75fe, #008cf0, #0ff, #008cf0, #3a75c4, #1974d2);
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: username--style12 18s ease infinite;
    -o-animation: username--style12 18s ease infinite;
    animation: username--style12 18s ease infinite;
    color: #fff;
    font-size: 87%;
    font-weight: 400;
    font-style: normal;
    padding: 1px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
}

 

[ZloyDed]

Скриншоты заливаются сюда на форум. Лучше ссылку на форум чем скрин, там по нему вообще ничего не понять

 

[Wayne_Deep]

Скриншоты заливаются сюда на форум. Лучше ссылку на форум чем скрин, там по нему вообще ничего не понять

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Waynet]

Позвольте спросить, а где ключевые кадры? Как оно двигаться будет?

 

[Wayne_Deep]

Позвольте спросить, а где ключевые кадры? Как оно двигаться будет?

Какие кадры?
Я купил такой за 100 рублей
больше ничего не довали

 

[Waynet]

Какие кадры?
Я купил такой за 100 рублей
больше ничего не довали

@keyframes не слышали?

 

[Wayne_Deep]

@keyframes не слышали?

нет...

 

[ZloyDed]

Какие кадры?
Я купил такой за 100 рублей
больше ничего не довали

что купил, код?

 

[Wayne_Deep]

что купил, код?

да

 

[ZloyDed]

а спросить у того кто продал не проще?

 

[Waynet]

Попробуйте тогда сделать примерно так:

userBanner.userBanner--check {
  color: #fff;
  background: linear-gradient(124deg, #33f, #0ff, #33f, #1f75fe, #008cf0, #0ff, #008cf0, #3a75c4, #1974d2));
  background-position: 0 0;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 87%;
  font-weight: 400;
  font-style: normal;
  padding: 1px 6px;
  display: inline-block;
  text-align: center;
  animation: background 2s infinite alternate;
}

@keyframes background {
  100% {
    background-position: 0 200px;
  }
}

Должно помочь

 

[Wayne_Deep]

а спросить у того кто продал не проще?

он блокнул меня (

Попробуйте тогда сделать примерно так:

userBanner.userBanner--check {
  color: #fff;
  background: linear-gradient(124deg, #33f, #0ff, #33f, #1f75fe, #008cf0, #0ff, #008cf0, #3a75c4, #1974d2));
  background-position: 0 0;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 87%;
  font-weight: 400;
  font-style: normal;
  padding: 1px 6px;
  display: inline-block;
  text-align: center;
  animation: background 2s infinite alternate;
}

@keyframes background {
  100% {
    background-position: 0 200px;
  }
}

Должно помочь

сейчас попробую

 

[Waynet]

он блокнул меня (

Поздравляю, вас обманули

 

[Wayne_Deep]

Поздравляю, вас обманули

((

 

[Wayne_Deep]

сейчас попробую

вообще пропали баннеры..

 

[ZloyDed]

Получи здесь группу проверенный, и смотри мануалы, тут этих баннеров полно, от Skaiman целая куча всяких разных, и не надо будет связываться со всякими кидалами

 

[Waynet]

Посмотреть вложение 140658 вообще пропали баннеры..

Прошу прощения, не тот код вам дал, он неисправен был, вот вариант ниже:

.userBanner {
    border: none;
    padding: 3px 6px;
    animation: gradientBanner 5s infinite linear;
    &.userBanner--admin {
        background: linear-gradient(149deg, rgba(24,187,156,1) 0%, rgba(106,57,175,1) 42%, rgba(187,24,148,1) 72%, rgba(115,53,134,1) 100%);
        background-size: 500%;
        color: #fff;
    }
}

@keyframes gradientBanner {
    0% {
        background-position: 80% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 80% 0%;
    }
}

 

[Wayne_Deep]

Прошу прощения, не тот код вам дал, он неисправен был, вот вариант ниже:

.userBanner {
    border: none;
    padding: 3px 6px;
    animation: gradientBanner 5s infinite linear;
    &.userBanner--admin {
        background: linear-gradient(149deg, rgba(24,187,156,1) 0%, rgba(106,57,175,1) 42%, rgba(187,24,148,1) 72%, rgba(115,53,134,1) 100%);
        background-size: 500%;
        color: #fff;
    }
}

@keyframes gradientBanner {
    0% {
        background-position: 80% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 80% 0%;
    }
}

попробую..

 

[Wayne_Deep]

Прошу прощения, не тот код вам дал, он неисправен был, вот вариант ниже:

.userBanner {
    border: none;
    padding: 3px 6px;
    animation: gradientBanner 5s infinite linear;
    &.userBanner--admin {
        background: linear-gradient(149deg, rgba(24,187,156,1) 0%, rgba(106,57,175,1) 42%, rgba(187,24,148,1) 72%, rgba(115,53,134,1) 100%);
        background-size: 500%;
        color: #fff;
    }
}

@keyframes gradientBanner {
    0% {
        background-position: 80% 0%;
    }
    50% {
        background-position: 20% 100%;
    }
    100% {
        background-position: 80% 0%;
    }
}

Огромнейшее спасибо! <3 Работает!! Можно закрывать - тему

 

[Waynet]

Огромнейшее спасибо! <3 Работает!! Можно закрывать - тему

<3