Сделай так чтобы в этом коде градиентированные цвета плавно перемещалиськод Define an array of colorsvar colors = #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #808080 #800000 #8
Для плавного перемещения градиентированных цветов можно использовать CSS свойство background с анимацией.
Вот как это можно сделать:
- Создайте новый массив с градиентированными цветами, например:
var gradientColors = [ "linear-gradient(to right, #FF0000 0%, #00FF00 16.67%, #0000FF 33.33%, #FFFF00 50%, #00FFFF 66.67%, #FF00FF 83.33%, #C0C0C0 100%)", "linear-gradient(to right, #808080 0%, #800000 16.67%, #808000 33.33%, #008000 50%, #800080 66.67%, #008080 83.33%, #000080 100%)", "linear-gradient(to right, #FFFFFF 0%, #000000 100%)" ];
- Создайте новую функцию, которая будет получать случайный градиентный цвет из массива gradientColors и устанавливать его как фоновый цвет с помощью CSS анимации:
function changeBackgroundGradient() { var color = gradientColors[Math.floor(Math.random() * gradientColors.length)]; document.body.style.background = color; document.body.style.animation = "backgroundGradient 5s linear"; }
- Добавьте CSS анимацию backgroundGradient, которая будет плавно изменять фоновый цвет:
@keyframes backgroundGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
- Вызывайте новую функцию changeBackgroundGradient вместо старой changeBackgroundColor с помощью setInterval:
setInterval(changeBackgroundGradient, 5000);
Теперь градиентированные цвета будут плавно перемещаться каждые 5 секунд с помощью CSS анимации
原文地址: https://www.cveoy.top/t/topic/cb2h 著作权归作者所有。请勿转载和采集!