我正在构建一个Web应用程序，一些HTML元素可能需要一些时间来获取。所以我决定呈现元素的布局，而不使用后端的数据。但是我想向用户表明，数据是通过CSS动画加载的。我希望它看起来像这样，但是我希望颜色的过渡是平滑的，这样较亮的区域从一边移动到另一边。2有什么想法吗？
body {
animation: 2000ms infinite color-loading;
}
@keyframes color-loading {
0% {
background: linear-gradient(
to right,
#363644,
#282933
);
}
100% {
background: linear-gradient(
to right,
#282933,
#363644
);
}
}
2条答案
按热度按时间ulmd4ohb1#
我不认为任何主流浏览器都支持css过渡/动画中线性渐变的平滑过渡。
一种方法是将一个div放在另一个div中，使容器div隐藏溢出，使内部div更长，相对定位，并带有线性渐变背景。然后，在动画中，可以平滑地重新定位内部div：
第一个
d8tt03nd2#
我想
animation-timing-function属性会帮助你。另外，我检查了一下，发现你的背景颜色非常相似，尝试用
animation-timing-function属性与其他颜色组合，看看有什么不同。请参考以下链接了解更多详细信息：https://www.w3schools.com/css/css3_animations.asp
如果您发现任何问题，请告诉我。