参考效果地址：CSS背景图无限循环滚动动画[1]

Tips：文末有示例代码地址。

或许你主要想实现背景倾斜移动的效果，但这里也会给你介绍点其他知识点～ 首先如果你想要实现背景这样的，方法有很多，只要有一张图，和 动画就行了！

svg图片地址[2]，接下来就是让重叠动起来，代码直接放最下面了就。

知识点：

注：有些属性可能用处不大，但是还是建议了解下

place-items: center;[3]: 属性是align-items 和 justify-items 的简写;

place-content: center;[4]: 属性是align-content 和 justify-content的简写;

[grid-template-areas: "body";](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-areas "grid-template-areas: "body";"): 属性是网格区域 grid areas 在CSS中的特定命名;

grid-area: body;[5]: 边界的约定,对照着grid-template-areas使用

vmin、vmax单位

inline-size[6]: 属性影响一个元素的width 或 height，以改变一个元素的盒模型的水平或垂直大小;

prefers-reduced-motion[7]: 用于检测用户的系统是否被开启了动画减弱功能

clamp()函数[8]的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。

:not 选择器

代码如下：

Demo 获取方式

获取源码方式：点击左上方「」关注并回复 “” 即可获取。

GitHub FBYVue BgLoopScroll[9]

参考资料[1]

CSS背景图无限循环滚动动画: https://www.jq22.com/code4026

[2]

svg图片地址: https://www.jq22.com/newjs/foot-pattern.svg

[3]

place-items: center;: https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-items

[4]

place-content: center;: https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-content

[5]

grid-area: body;: https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-area

[6]

inline-size: https://developer.mozilla.org/zh-CN/docs/Web/CSS/inline-size

[7]

prefers-reduced-motion: https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion

[8]

clamp()函数: https://www.cnblogs.com/lvonve/p/13816256.html

[9]

GitHub FBYVue: https://github.com/fanbaoying/FBYVue/blob/main/FBYVueDemo/BgLoopScroll.html

-End-