Иконка ресурса

Инструкция Анимация логотипа css

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

Skyler

Проверенный
Сообщения
25
Симпатии
29
Баллы
13
#1
Пользователь Skyler разместил новый ресурс:

Анимация логотипа css - Анимация логотипа

Возможно кому то будет интересно.
В EXTRA.CSS добавить
Код:
#logo img {
    animation: hue 10s linear infinite;
    -webkit-animation: hue 10s linear infinite;
}
@-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); }
}...
Узнать больше об этом ресурсе...
 

blak1

Проверенный
Сообщения
2
Симпатии
0
Баллы
1
#2
подскажите пожалуйста, а как убрать не нужные цвета и добавить свои?
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.168
Симпатии
5.967
Баллы
266
#3
подскажите пожалуйста, а как убрать не нужные цвета и добавить свои?
Там используется фильтр для изображения hue-rotate, он изменяет оттенок освещения картинки.
 

Gertur

Проверенный
Сообщения
11
Симпатии
1
Баллы
3
#4
Шуб
Там используется фильтр для изображения hue-rotate, он изменяет оттенок освещения картинки.
А на двойке работает. Что то код поставил. А лого как было сине-красным ю, так и осталось, цвета не меняет(
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.168
Симпатии
5.967
Баллы
266
#5
А на двойке работает. Что то код поставил. А лого как было сине-красным ю, так и осталось, цвета не меняет(
Less:
.p-header-logo--image {
    img {
        animation: hue 10s linear infinite;
    }
}

@keyframes hue {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(360deg); }
    100% { filter: hue-rotate(0deg); }
}
 
Вверх Снизу