我正在使用名为的程序创建交互式触摸屏显示器直观界面并创建了一些背景瓷砖/方块，我想通过在颜色之间缓慢过渡来使其看起来“活跃”。
我在 CSS 中使用了线性渐变过渡来做到这一点，但问题是过渡看起来不稳定。该程序正在运行 12 个可见图块（这是一个非常大的触摸屏）。
我尝试过使用更少的颜色并在更强大的 GPU 上运行（我认为无论如何都是 CPU 运行），但这没有帮助。
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
目前动画明显不稳定。我希望过渡能够更加顺利。有谁知道我怎样才能实现这一目标？
这是代码片段。
body {
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s ease infinite;
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
<html>
<body>
</body>
</html>
动画化background-*属性可能是资源密集型的 - 您可以尝试设置动画transform for 相对地更好的性能 - 请参阅下面的演示traslate对于动画：
body {
margin: 0;
}
div {
height: 100vh;
overflow: hidden;
}
div:after {
content: '';
display: block;
width: 400vw;
height: 400vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
animation: gradient 15s ease infinite;
}
@keyframes gradient {
50% {
transform: translate(-300vw, -300vh);
}
}
<div></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
