如何平滑 CSS 渐变过渡?
Posted
技术标签:
【中文标题】如何平滑 CSS 渐变过渡?【英文标题】:How to smooth out a CSS gradient transition? 【发布时间】:2019-09-09 15:04:18 【问题描述】:我正在使用一个名为 Intuiface 的程序创建一个交互式触摸屏显示器,并创建了一些背景图块/正方形,我想通过在颜色之间缓慢过渡来使其看起来“生动”。
我在 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%
目前动画明显不连贯。我希望过渡更加顺利。有谁知道我如何做到这一点?
这里是代码sn-p。
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>
【问题讨论】:
【参考方案1】:动画background-*
属性可能会占用大量资源 - 您可以尝试动画 transform
以获得相对更好的性能 - 请参阅下面的演示,使用 traslate 制作动画: p>
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>
【讨论】:
【参考方案2】:由于您的动画持续 15 秒,因此尝试以全速 60fps 运行它意味着计算 15*60 = 900 帧。
由于一帧和下一帧之间的差异非常小,您可以减少 CPU 的工作量来要求步进动画,例如 steps(75)
在动画之间设置轻微的延迟也是不错的,这样它们就不会同时执行
body
width: 100wh;
height: 90vh;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
animation: Gradient 15s infinite steps(75);
@keyframes Gradient
0%
background-position: 0% 50%
50%
background-position: 100% 50%
100%
background-position: 0% 50%
<html>
<body>
</body>
</html>
【讨论】:
以上是关于如何平滑 CSS 渐变过渡?的主要内容,如果未能解决你的问题,请参考以下文章