CSS+HTML

时间:2021-6-12 作者:qvyue

CSS+HTML
2021-06-08 11-37-05.gif

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

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

CSS+HTML
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);
  1. :not 选择器
/* 非 .filled类名 的所有 span元素 */
        span:not(.filled) {

        }
代码如下:




    

Document

        /* 引入外部字体库 */
        @import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap");

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        /* 设置全局变量属性 */
        :root {
            --text-color: hsl(0 95% 60%);
            --bg-color: hsla(0, 0%, 100%, 0);
            --bg-size: 200px;
        }

        body {
            /* 网格布局 */
            display: grid;
            /*  place-items 属性是align-items 和 justify-items 的简写 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-items */
            place-items: center;
            /* place-content 属性是align-content 和 justify-content的简写. */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-content */
            place-content: center;
            /* grid-template-areas CSS 属性是网格区域 grid areas 在CSS中的特定命名 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-areas */
            grid-template-areas: "body";
            overflow: hidden;
            font-family: "Dela Gothic One", sans-serif;
            background-color: var(--bg-color);
        }

        body::before {
            /* vmin:当前vw和vh中较小的一个值; */
            /* vmax:当前vw和vh中较大的一个值; */
            /* vmin、vmax的作用:在做移动端页面开发时,会使得文字大小在横竖屏下保持一致。 */
            --size: 150vmax;
            /* grid-area 边界的约定 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-area */
            grid-area: body;
            content: "";
            /* inline-size CSS 属性影响一个元素的width 或 height,以改变一个元素的盒模型的水平或垂直大小 */
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/inline-size */
            inline-size: var(--size);
            /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/block-size */
            block-size: var(--size);
            /* 平铺svg图 */
            background-image: url("https://www.jq22.com/newjs/foot-pattern.svg");
            background-size: var(--bg-size);
            background-repeat: repeat;

            transform: rotate(45deg);
            opacity: 0.25;
            animation: bg 6s linear infinite;
        }

        /* prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能 */
        /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion */
        @media (prefers-reduced-motion: reduce) {
            body::before {
                animation-duration: 0s;
            }
        }

        /* 背景图平移动画 */
        @keyframes bg {
            to {
                background-position: 0 calc(var(--bg-size) * -1);
            }
        }

        .text {
            grid-area: body;
            position: relative;
            display: flex;
            /* https://www.runoob.com/cssref/css3-pr-flex-direction.html */
            flex-direction: column;
            /* clamp() 函数的作用是把一个值限制在一个上限和下限之间,当这个值超过最小值和最大值的范围时,在最小值和最大值之间选择一个值使用。 */
            /* https://www.cnblogs.com/lvonve/p/13816256.html */
            /* clamp() 函数接收三个用逗号分隔的表达式作为参数,按最小值、首选值、最大值的顺序排列 */
            font-size: clamp(3rem, 10vmin, 6rem);
        }

        .heading span {
            display: block;
            text-transform: uppercase;
        }

        .heading span.filled {
            color: var(--text-color);
        }

        /* 非 .filled 的所有 span元素 */
        .heading span:not(.filled) {
            --stroke: min(0.25vmin, 2px) var(--text-color);
            color: var(--bg-color);
            -webkit-text-stroke: var(--stroke);
            text-stroke: var(--stroke);
        }

        .subheading {
            position: relative;
            margin-block-start: 1rem;
            margin-inline-start: auto;
            font-size: 0.428em;
            color: var(--text-color);
        }
    

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。