CSS+HTML<循环滚动背景效果>

2021-06-08 11-37-05.gif

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

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

16535515-68bf0b19fdbfc578.png

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

知识点：

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

1.网格布局display: grid,不太了解的，可以参考 此篇文章
place-items: center;属性是align-items 和 justify-items 的简写;
place-content: center;属性是align-content 和 justify-content的简写;
grid-template-areas: "body";属性是网格区域 grid areas 在CSS中的特定命名;
grid-area: body;边界的约定,对照着grid-template-areas使用

2.vmin、vmax单位

            /* vmin：当前vw和vh中较小的一个值； */
            /* vmax：当前vw和vh中较大的一个值； */
            /* vmin、vmax的作用：在做移动端页面开发时，会使得文字大小在横竖屏下保持一致。 */
            --size: 150vmax;

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

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

   @media (prefers-reduced-motion: reduce) {
            body::before {
                animation-duration: 0s;
            }
        }

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

/* clamp() 函数接收三个用逗号分隔的表达式作为参数，按最小值、首选值、最大值的顺序排列 */
font-size: clamp(3rem, 10vmin, 6rem);

6. :not 选择器

/* 非 .filled类名 的所有 span元素 */
        span:not(.filled) {

        }

代码如下：

    
    
    
    



    

        
            Thank you
            Thank you
            Thank you
            Thank you
            Thank you
            Thank you
        
        Have a nice day