Анимация шапки

[Vincod]

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

 

[HAIM]

Создаёте нужный класс в extra.less.

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

И в настройках навигации прописываете его нужному элементу

 

[Vincod]

Спасибо большое

А где

Создаёте нужный класс в extra.less.

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

И в настройках навигации прописываете его нужному элементу
Посмотреть вложение 88148

А где мне взять имя и значение что туда именно вписать?

 

[HAIM]

А где
А где мне взять имя и значение что туда именно вписать?

Имя должно быть такое же — class
Значение — название класса из extra.less, которое делает текст мигающим, его можете придумать сами. Чтобы не было случайных совпадений можете начать его с custom_ (лично я так делаю). Например, custom_blinking_item или что-то в таком духе.

 

[Vincod]

Имя должно быть такое же — class
Значение — название класса из extra.less, которое делает текст мигающим, его можете придумать сами. Чтобы не было случайных совпадений можете начать его с custom_ (лично я так делаю). Например, custom_blinking_item или что-то в таком духе.

Все равно не получается какое тут имя? может я имя прописываю криво?

 

[Mirovinger]

Что Вы делаете и куда пишите?

 

[HAIM]

Тут у вас id, а не class — это основы css.
Пишите в дополнительные атрибуты элемента id и blink

UPD: а ещё в файле extra.less не нужно прописывать тег <style></style>

 

[Skaiman]

Мало добавить класс к пункту навигации, надо к этому классу еще и свойства анимации

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

 

[HAIM]

OFFTOP

Skaiman, ну там на скрине часть кода вида, так что думаю с этим всё нормально :)

 

[Skaiman]

ну там на скрине часть кода вида, так что думаю с этим всё нормально

А я так не думаю :) он просто увидел где то код и пытается его приспособить, но только понятия не имеет что там и что с ним делать :)

 

[Mirovinger]

Ничего там как раз нормального и нет.
<style> в extra.less не используется, по этому я и задал вопрос, где что делается.

 

[Vincod]

Тут у вас id, а не class — это основы css.
Пишите в дополнительные атрибуты элемента id и blink

UPD: а ещё в файле extra.less не нужно прописывать тег <style></style>

Вот так ?

 

[HAIM]

На втором скрине id, а не class

 

[Skaiman]

Vincod, в дополнительный атрибутах класс, а в коде id

На втором скрине id, а не class

А лучше в коде заменить на класс .blink id надо использовать для других целей

 

[Vincod]

Прописал id вместо class нечего не работает ( и да я просто увидел такую фишку но не знаю как ее приспособить

Вот так

На втором скрине id, а не class

Мне очень тяжело это дается

 

[Skaiman]

Vincod, там в коде: color: color: #F00;

Мне очень тяжело это дается

Это основы, ни коим образом не относятся к движку и ни кто не обязан в рамках форума обучать тебя основам, для этого есть другие ресурсы.

 

[Vincod]

Vincod, там в коде: color: color: #F00;

Удалил оставил 1 color
Все равно не работает (

Я понимаю что вы не обязаны мне помочь но я очень прошу)))

 

[Skaiman]

Все работает

.my-anim {
    font-weight: bold;
    color: #F00;
    -webkit-animation: blink 2s linear 0s infinite;
    animation: blink 2s linear 0s infinite;   
}

@-webkit-keyframes blink {
  0%{
    color: #F00;
  }
  50%{
    color: #FBB;
  }
  100%{
    color: #F00;
  }
}

@keyframes blink {
  0%{
    color: #F00;
  }
  50%{
    color: #FBB;
  }
  100%{
    color: #F00;
  }
}

Там надо смотреть тот пункт, может к нему применены уже класс или ид

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

 

[Vincod]

Спасибо большое Вам за терпение !!!)

 

[borodaagvali]

В моем случае будет так.

/*Меню в шапке с анимацией*/
.p-navEl [data-nav-id="rules"] {
    font-weight: bold;
    color: #F00;
    -webkit-animation: blink 2s linear 0s infinite;
    animation: blink 2s linear 0s infinite; 
}

@-webkit-keyframes blink {
  0%{
    color: #F00;
  }
  50%{
    color: #FBB;
  }
  100%{
    color: #F00;
  }
}

@keyframes blink {
  0%{
    color: #F00;
  }
  50%{
    color: #FBB;
  }
  100%{
    color: #F00;
  }
}

С ув. Магомед.