2021-06-08 11-37-05.gif
參考效果地址：CSS背景圖無限循環(huán)滾動動畫
或許你主要想實現(xiàn)背景傾斜移動的效果左权，但這里也會給你介紹點其他知識點～
首先如果你想要實現(xiàn)背景這樣的晨仑，方法有很多褐墅，只要有一張圖，和animation動畫就行了洪己！
16535515-68bf0b19fdbfc578.png
svg圖片地址妥凳，接下來就是讓重疊動起來，代碼直接放最下面了就答捕。
知識點：
??注：有些屬性可能用處不大逝钥，但是還是建議了解下
1.網(wǎng)格布局display: grid,不太了解的，可以參考 此篇文章
place-items: center;屬性是align-items 和 justify-items 的簡寫;
place-content: center;屬性是align-content 和 justify-content的簡寫;
grid-template-areas: "body";屬性是網(wǎng)格區(qū)域 grid areas 在CSS中的特定命名;
grid-area: body;邊界的約定,對照著grid-template-areas使用
2.vmin拱镐、vmax單位
/* vmin：當前vw和vh中較小的一個值晌缘； */
/* vmax：當前vw和vh中較大的一個值； */
/* vmin痢站、vmax的作用：在做移動端頁面開發(fā)時，會使得文字大小在橫豎屏下保持一致选酗。 */
--size: 150vmax;
3.inline-size屬性影響一個元素的width 或 height阵难，以改變一個元素的盒模型的水平或垂直大小;
4.prefers-reduced-motion 用于檢測用戶的系統(tǒng)是否被開啟了動畫減弱功能
@media (prefers-reduced-motion: reduce) {
body::before {
animation-duration: 0s;
}
}
5.clamp()函數(shù) 的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時芒填，在最小值和最大值之間選擇一個值使用呜叫。
/* clamp() 函數(shù)接收三個用逗號分隔的表達式作為參數(shù)空繁，按最小值、首選值朱庆、最大值的順序排列 */
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%;
}
/* 設(shè)置全局變量屬性 */
:root {
--text-color: hsl(0 95% 60%);
--bg-color: hsla(0, 0%, 100%, 0);
--bg-size: 200px;
}
body {
/* 網(wǎng)格布局 */
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 屬性是網(wǎng)格區(qū)域 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的作用：在做移動端頁面開發(fā)時傲诵，會使得文字大小在橫豎屏下保持一致。 */
--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 用于檢測用戶的系統(tǒng)是否被開啟了動畫減弱功能 */
/* 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() 函數(shù)的作用是把一個值限制在一個上限和下限之間拴竹，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用剧罩。 */
/* https://www.cnblogs.com/lvonve/p/13816256.html */
/* clamp() 函數(shù)接收三個用逗號分隔的表達式作為參數(shù)栓拜，按最小值、首選值惠昔、最大值的順序排列 */
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>
