Плавная анимация градиента в JavaScript: как сделать переходы цветов плавными

// Define an array of colors var colors = [ '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', '#C0C0C0', '#808080', '#800000', '#808000', '#008000', '#800080', '#008080', '#000080', '#FFFFFF', '#000000' ];

// Function to get a random color from the array function getRandomColor() { var randomIndex = Math.floor(Math.random() * colors.length); return colors[randomIndex]; }

// Function to change the background color of the document function changeBackgroundColor() { var color1 = getRandomColor(); var color2 = getRandomColor(); var gradient = 'linear-gradient(to right, ' + color1 + ', ' + color2 + ')'; document.body.style.background = gradient; }

// Call the changeBackgroundColor function every 5 seconds setInterval(changeBackgroundColor, 1000);

Для плавного перемещения градиентированных цветов можно использовать CSS свойство transition для плавного перехода между цветами. Для этого нужно изменить функцию changeBackgroundColor следующим образом:

function changeBackgroundColor() { var color1 = getRandomColor(); var color2 = getRandomColor(); var gradient = 'linear-gradient(to right, ' + color1 + ', ' + color2 + ')'; document.body.style.background = gradient; }

Здесь мы генерируем два случайных цвета и создаем градиентную строку с помощью CSS свойства linear-gradient. Затем мы устанавливаем эту строку в качестве фона для элемента body.

Теперь для плавного перемещения градиентированных цветов нам нужно добавить CSS свойство transition для элемента body. Это можно сделать с помощью следующего CSS кода:

body { transition: background 1s ease; }

Здесь мы устанавливаем свойство transition для background с длительностью 1 секунда и функцией плавности ease. Теперь при каждом вызове функции changeBackgroundColor градиентный фон будет плавно переходить между двумя случайными цветами.