要实现背景线性渐变在div元素中实时不改变的效果,可以通过CSS动画和JavaScript来实现。下面是一个示例代码:
HTML代码:
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元素中实时不改变的效果。
上一篇:背景响应问题