Логотип этот состоит из двух слоев. div
с залитым ровным цветом и поверх него наложены белые буквы картинкой:
.fon {
padding: 20px;
background: #903;
display: inline-block
}
<div class=fon><img src="https://i.stack.imgur.com/4Mejn.png"></div>
Поскольку фон задается через CSS нет проблем его поменять:
$('.fon').css('background',"hsv("+h+", "+s+", "+v);
осталось подобрать значения (берем то что вы нарыли на сайте):
h=Math.floor(360*Math.random());
s=30+Math.floor(70*Math.random());
v=30+Math.floor(50*Math.random());
Собираем из этого функцию, и вызываем ее
//меняем цвет при наведении
$(".fon").mouseover(changecolor)
//меняем цвет по таймеру
setInterval(changecolor,10000)
Плавную смену цвета можно добавить используя transition
в css:
transition: background ease .7s
Рабочий пример:
function changecolor() {
h = Math.floor(360 * Math.random());
s = 30 + Math.floor(70 * Math.random());
v = 30 + Math.floor(50 * Math.random());
$('.fon').css('background', "hsl(" + h + ", " + s + "%, " + v + "% )");
}
//меняем цвет при наведении
$(".fon").mouseover(changecolor);
//меняем цвет по таймеру
setInterval(changecolor,10000);
//меняем цвет при загрузке
changecolor();
.fon {
padding: 20px;
background: #903;
display: inline-block;
transition: background ease .7s
}
.fon img {pointer-events:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=fon><img src="https://i.stack.imgur.com/4Mejn.png"></div>
<div id="als-logo" style="background-color: rgb(112, 50, 96);"></div>
А css показывает только это и прочие стили:element.style { background-color: rgb(112, 50, 96); }
Прога Visual Event показывает вот это:function g(){n.h=Math.floor(360*Math.random()),n.s=30+Math.floor(70*Math.random()),n.v=30+Math.floor(50*Math.random()),f(n.h,n.s,n.v.)
– Заур Гитинов 15 мар '17 в 19:28