如何动态改变线条的颜色？

<div id="line"></div>

#line {
  width: 100px;
  height: 2px;
  background-color: red; /* 初始颜色 */
  transition: background-color 0.5s; /* 添加过渡效果 */
}

var line = document.getElementById("line");

// 通过鼠标悬停来改变颜色
line.addEventListener("mouseover", function() {
  this.style.backgroundColor = "blue"; /* 新颜色 */
});

line.addEventListener("mouseout", function() {
  this.style.backgroundColor = "red"; /* 恢复初始颜色 */
});

// 通过定时器来周期性改变颜色
setInterval(function() {
  var randomColor = getRandomColor();
  line.style.backgroundColor = randomColor;
}, 1000); // 每秒钟改变一次颜色

// 生成随机颜色
function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var color = "#";
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}