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);
- :not 选择器
/* 非 .filled类名 的所有 span元素 */
span:not(.filled) {
}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 引入外部字体库 */
@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);
}
</style>
</head>
<body>
<h1 class="text" aria-label="Thank you. Have a nice day!">
<span class="heading" aria-hidden="true">
<span>Thank you</span>
<span>Thank you</span>
<span class="filled">Thank you</span>
<span>Thank you</span>
<span>Thank you</span>
<span>Thank you</span>
</span>
<span class="subheading" aria-hidden="true">Have a nice day</span>
</h1>
</body>
</html>
网友评论