如何使用'背景位置”在 CSS 中实现平滑的渐变动画？

如何使用 CSS 平滑地制作渐变动画

在 CSS 中制作渐变动画可能很棘手，特别是如果您想实现平滑过渡。产生不一致结果的一种方法是突然改变渐变的位置。

考虑以下代码：

.animated {<br> 宽度：300px;<br> 高度： 300px;<br> 边框：1px 纯黑；<br> 动画：gra 5s 无限；<br> 动画方向：反向；<br> -webkit-animation：gra 5s 无限；<br> -webkit-animation-direction ：反向；<br> 动画计时函数：线性；<br> -webkit-animation-timing-function: 线性;<br>}</p><p>@keyframes gra {<br> 0% {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%);

登录后复制

}
50% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%);

}
100% {

background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%);

}
}

此代码创建渐变动画，但它突然改变其位置，导致断断续续的效果。为了解决这个问题，我们可以在关键帧中使用background-position属性来平滑地移动渐变。

这是一个改进的CSS代码，可以实现平滑的渐变动画：

<h1 id="渐变">渐变</h1><p>{</p><pre class="brush:php;toolbar:false">height:300px;
width:300px;
border:1px solid black;
font-size:30px;
background: linear-gradient(130deg, #ff7e00, #ffffff, #5cff00);
background-size: 200% 200%;

-webkit-animation: Animation 5s ease infinite;
-moz-animation: Animation 5s ease infinite;
animation: Animation 5s ease infinite;

}

@-webkit-keyframes 动画 {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}
@-moz-关键帧动画 {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}
@keyframes 动画 {

0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}

}