Анимация логотипа форума

[Mirovinger]

Пользователь Mirovinger разместил новый ресурс:

Анимация логотипа форума - CSS3 анимация логотипа

Что бы не затерялся ответ из данной темы - XF 1.5 - Анимация логотипа.

Посмотреть вложение 61379

В EXTRA.css Вашего стиля добавить.

#logo img {
    animation: hue 120s linear infinite;
    -webkit-animation: hue 120s linear infinite;
}
@-webkit-keyframes hue {
    0% { -webkit-filter: hue-rotate(0deg); }
    50% { -webkit-filter:...

Узнать больше об этом ресурсе...

 

[niko22]

а если столь использует не картинку а текст

                                    class="uix_navigationLogoText">ЛОГО</h2>

Можно кака-то переделать данный код?

 

[Mirovinger]

Как-то так.

#uix_welcomeBlock .uix_welcomeBlock__header {
    animation: hue 120s linear infinite;
    -webkit-animation: hue 120s linear infinite;
    color: green;
}
@-webkit-keyframes hue {
    0% { -webkit-filter: hue-rotate(0deg); }
    50% { -webkit-filter: hue-rotate(360deg); }
    100% { webkit-filter: hue-rotate(0deg); }
}
@-moz-keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
@-ms-keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
@-o-keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
@keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}

 

[niko22]

не прокапало( это сделало смену цветов в в названии форума велком блоке , пытаюсь подбором найти

 

[Mirovinger]

А, это не логотип, я просто перепутал, оно больше в глаза бросается.
Тогда так.

.uix_navigationLogoText {
    animation: hue 120s linear infinite;
    -webkit-animation: hue 120s linear infinite;
    color: green;
}
@-webkit-keyframes hue {
    0% { -webkit-filter: hue-rotate(0deg); }
    50% { -webkit-filter: hue-rotate(360deg); }
    100% { webkit-filter: hue-rotate(0deg); }
}
@-moz-keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
@-ms-keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
@-o-keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
@keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}

И что бы было так, как в примере, нужно что бы и буквы по цветам были разными.

 

[niko22]

Если не сложно еще раз потревожу) не понимаю данный код ,как он работает , но хотел попросить следующее чтобы надпись из белого загорелась желтым ( несколько раз раз номагнула желтым, как будто моргает старания лампочка) а потом осталась светится желтым, заранее спасибо если найдется время для меня.

 

[Mirovinger]

Можно, как вариант.

.uix_navigationLogoText {
    animation: 5s linear 2s normal none running l2_animation;
    color: #ffb400;
 }
@keyframes l2_animation {
0% {
    opacity: 0.1;
}
50% {
    opacity: 0.5;
}
100% {
    opacity: 0.1;
}
}
@keyframes l2_animation {
0% {
    opacity: 0.1;
}
50% {
    opacity: 1;
}
100% {
    opacity: 0.1;
}
}

 

[Скриптик]

Либо лыжи не едут.. либо я дурак..

Спойлер

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

 

[>.P.S.I.X.<]

Либо лыжи не едут.. либо я дурак..

Спойлер

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

наверное второе :Biggrin1:

Спойлер

шучу

сам не давно ставил и все нормально работает. думаю проблема в самом логотипе. Так как он меняет цвет не всего логотипа. а всего вторую часть