背景线性渐变在div元素中实时不改变

要实现背景线性渐变在div元素中实时不改变的效果，可以通过CSS动画和JavaScript来实现。下面是一个示例代码：

HTML代码：

<div id="gradient-div"></div>

CSS代码：

#gradient-div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to right, red, blue);
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

JavaScript代码：

const gradientDiv = document.getElementById('gradient-div');
gradientDiv.style.animation = 'gradient-animation 5s linear infinite';

这段代码会在div元素中创建一个宽高为200px的方块，并应用了一个从红色到蓝色的线性渐变背景。通过CSS的@keyframes和animation属性，定义了一个名为gradient-animation的动画，使背景从初始位置开始，在5秒内从左到右进行移动，并无限循环播放。

在JavaScript代码中，获取到div元素的引用，并将gradient-animation动画应用于div的背景，实现背景线性渐变在div元素中实时不改变的效果。