使用CSS线性渐变创建无缝动画

div{
边界半径：2em；
宽度：10雷姆；
高度：10雷姆；
背景色：#0dd；
背景图像：
线性梯度（
-45度，
rgba（0,0,0,0.125），透明，rgba（0,0,0,0.125），透明
);  
}
div{
动画名称：对角移动；
动画持续时间：6s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧对角移动{
0% {
背景位置：0rem 0rem；
}
100% {
背景位置：10rem 10rem；
}
}

* {
框大小：边框框；
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

渐变由3部分组成（在4个参考点/颜色定义之间），这会创建一种“不对称”结构，因为末尾的颜色与开头的颜色不同。如果添加另一个参考点/颜色（与第一个相同），则渐变在开始和结束处以及正方形的其他两个角处具有相同的颜色，因此动画工作平滑：

div{
边界半径：2em；
宽度：10雷姆；
高度：10雷姆；
背景色：#0dd；
背景图像：
线性梯度（
-45度，
rgba（0,0,0,0.125），透明，rgba（0,0,0,0.125），透明，rgba（0,0,0,0.125）
);  
}
div{
动画名称：对角移动；
动画持续时间：6s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧对角移动{
0% {
背景位置：0rem 0rem；
}
100% {
背景位置：10rem 10rem；
}
}

* {
框大小：边框框；
保证金：0；
填充：0；
}
html，正文{
身高：100%；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
在这种情况下，最好考虑一个比元素大两倍的重复梯度，这样就不必费心在代码>背景位置< /代码>：
内的特定值。

.box{
边界半径：2em；
宽度：10雷姆；
高度：10雷姆；
背景色：；
背景：
重复线性梯度（
-45度，
rgba（0,0,0,0.125），透明，rgba（0,0,0,0.125）25%
)右下角/200%200%
#0dd；
动画：对角移动6s线性无限；
}
@关键帧对角移动{
100% {
背景位置：左上角；
}
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
保证金：0；
}