Javascript-форум - Плавно изменить цвета

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Плавно изменить цвета (https://javascript.ru/forum/misc/76399-plavno-izmenit-cveta.html)

Плавно изменить цвета

Есть страничка, нужно что бы плавно изменялись цвета у элементов, с темного на более светлые и назад к темным, с определённым интервалом, например в 1000милисекунд. Для простоты взял один див с фоном и бордер и два спана, для всего указал только по пять цветов для простоты.

<style>
div.g { background: #e1e1e1; border: 1px solid #cacaca;} /* background #dbdbdb; #d5d5d5; #cfcfcf; #c9c9c9; border #c4c4c4; #bebebe; #b8b8b8; #b2b2b2; */
span.a { color: #009900; } /* #00a500; #00b400; #00c300; #00d200; */
span.b { color: #0000ff; } /* #1e1eff; #3c3cff; #5a5aff; #7878ff; */
</style>
<div class="g">
<span class="a">test</span><br>
<span class="b">test</span><br>
</div>

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

m~r.Nemo,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:100px;
    height:100px;
    -webkit-animation: color 5s ease-in-out infinite;
	-moz-animation: color 5s ease-in-out infinite;
	-o-animation: color 5s ease-in-out infinite;
	animation: color 5s ease-in-out infinite;
  }

  @keyframes color {
      0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }

}
@-webkit-keyframes color {
  0% {
        background-color: #FF0000;
      }
      17%{
         background-color: #FFA500;
      }
      34%{
         background-color:  #FFFF00;
      }
     51%{
         background-color:  #008000;
      }
	68% {
		  background-color:  #0000FF;
	}
   85%{
         background-color:  #000080;
   }
   100%{
     background-color: #800080;
   }
}


  </style>
</head>

<body>
<div></div>

</body>

</html>

А разве все браузеры поддерживают? Иногда без скриптов не обойтись...

Конечно предпочтительнее что бы скрипт определил 50-100 оттенков градиента, вручную это немалый кусок работы, определить все оттенки для десятка-двух элементов...

Я бы так сделал если через скрип.

var color = ["FF0000", "FFA500", "FFFF00", "008000", "0000FF", "000080", "800080", "..."];
for (let index = 0; index < color.length; index++) {
    //а тут с каждой итерацией применяй новый цвет c нужной задержкой. 
}

рони, я не про это имел ввиду, к примеру есть блочный элемент (див) высотой 1пиксель и шириной 60-100, задан фон градиентом, возможно ли узнать код цвета в каждой точке?

m~r.Nemo,
напрямую метода не знаю.
http://qaru.site/questions/93665/jav...r-mouse-cursor

рони,
ясно, в принципе с css-анимацией разобрался, это то что мне надо, но остался вопрос как реализовать анимацию на яваскрипт, типа

Цитата:

Сообщение от рони (Сообщение 501569)

m~r.Nemo,

<style>
span.U_003A { color: #9c9c9c; }
#clock.x  span.U_003A { color: #333399; }
</style>
<span id="clock"></span>
<script type="text/javascript">
function clock() {
 var date = new Date();
 var hour=date.getHours();
 var minute=date.getMinutes();
 var sec=date.getSeconds();
 var day=date.getDate();
 var month=date.getMonth();
 var year=date.getFullYear();
 var weekday=date.getDay();
 var monthes=new Array ("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
 var dayNames = new Array("Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота");
document.getElementById("clock").innerHTML = (hour<10?"0":"")+hour+" <span class='U_003A'>:</span> "+(minute<10?"0":"")+minute+" <span class='U_003A'>:</span> "+(sec<10?"0":"")+sec+"<br/>"+dayNames[weekday]+"<br/>"+(day<10?"0":"")+day+" "+monthes[month]+" "+year+" г.";
document.getElementById("clock").classList.toggle("x");
window.setTimeout("clock()",500);
}
clock();
</script>

только для текста фона и т д если есть не два цвета а все необходимые оттенки.