Показать сообщение отдельно
  #3 (permalink)  
Старый 25.02.2016, 13:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

анимация backgroundColor на js
Tord002,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .time{
    background-color: rgb(255, 30, 255);
    color: rgb(102, 255, 255);
    padding: 4px 8px;
    font-size: 24px;
    border-radius: 4px;
  }

  </style>
</head>

<body>

  <div id=div class="time">Блок</div>
  <script>



function anime(b) {
    return {
            play: function() {
            var d = performance.now();
            requestAnimationFrame(function e(a) {
                a = (a - d) / b.duration;
                1 < a && (a = 1);
                var r = b.from + (b.to - b.from) * a | 0;
                b.elem.style.backgroundColor = 'rgb(' + r  + ',' + 30 + ',' + r +')';
                1 == a && (d = performance.now(),b.from += b.to, b.to = b.from - b.to, b.from -= b.to);
                requestAnimationFrame(e)
            })
        }
    }
};
var anim = anime({
        from : 255,
        to : 0,
        duration: 5 * 1000,
        elem : document.querySelector('.time')
    });
anim.play()

</script>
</body>
</html>
Ответить с цитированием