如何解决Glitchy CSS动态线性渐变滚动
我注意到CSS linear-gradient
作为动态背景(使用keyframes
),如果您在页面上快速滚动时,似乎会出现故障。例如here,如果您抓住滚动条并快速快速地上下滚动,您会看到下面的白色。似乎与显示更多页面时渐变重绘的方式有关,或者...我尝试在各处搜索,但还无法找到特定于此的任何内容-任何想法?相关的CSS是:
body {
background: linear-gradient(angle,some colours);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
我想知道是否必须将背景固定为某种“图像”,以便浏览器不必在滚动时重新绘制渐变。
解决方法
考虑在其中应用翻译的固定元素:
html::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: linear-gradient(60deg,red,blue,green);
animation: gradient 3s linear infinite alternate;
}
@keyframes gradient {
100% {
transform: translateX(-50%);
}
}
,
只需在伪::before
元素上进行样式设置即可,而不是直接在body
上进行样式设置,因此您可以使用position: fixed
。
body::before {
content: "";
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(240deg,#567EB9 0%,#B29ACA 50%,#B29ACA 70%,#F9839B 95%,#e6b394 100%);
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
它可能不是最佳解决方案,但它可以工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。