参考效果地址: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-