2021-06-08 11-37-05.gif
參考效果地址：CSS背景圖無(wú)限循環(huán)滾動(dòng)動(dòng)畫
或許你主要想實(shí)現(xiàn)背景傾斜移動(dòng)的效果，但這里也會(huì)給你介紹點(diǎn)其他知識(shí)點(diǎn)～
首先如果你想要實(shí)現(xiàn)背景這樣的，方法有很多，只要有一張圖，和animation動(dòng)畫就行了！
16535515-68bf0b19fdbfc578.png
svg圖片地址，接下來(lái)就是讓重疊動(dòng)起來(lái)，代碼直接放最下面了就。
知識(shí)點(diǎn)：
??注：有些屬性可能用處不大，但是還是建議了解下
1.網(wǎng)格布局display: grid,不太了解的，可以參考 此篇文章
place-items: center;屬性是align-items 和 justify-items 的簡(jiǎn)寫;
place-content: center;屬性是align-content 和 justify-content的簡(jiǎn)寫;
grid-template-areas: "body";屬性是網(wǎng)格區(qū)域 grid areas 在CSS中的特定命名;
grid-area: body;邊界的約定,對(duì)照著grid-template-areas使用
2.vmin、vmax單位
/* vmin：當(dāng)前vw和vh中較小的一個(gè)值； */
/* vmax：當(dāng)前vw和vh中較大的一個(gè)值； */
/* vmin、vmax的作用：在做移動(dòng)端頁(yè)面開(kāi)發(fā)時(shí)，會(huì)使得文字大小在橫豎屏下保持一致。 */
--size: 150vmax;
3.inline-size屬性影響一個(gè)元素的width 或 height，以改變一個(gè)元素的盒模型的水平或垂直大小;
4.prefers-reduced-motion 用于檢測(cè)用戶的系統(tǒng)是否被開(kāi)啟了動(dòng)畫減弱功能
@media (prefers-reduced-motion: reduce) {
body::before {
animation-duration: 0s;
}
}
5.clamp()函數(shù) 的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過(guò)最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。
/* clamp() 函數(shù)接收三個(gè)用逗號(hào)分隔的表達(dá)式作為參數(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>
/* 引入外部字體庫(kù) */
@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 的簡(jiǎn)寫 */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-items */
place-items: center;
/* place-content 屬性是align-content 和 justify-content的簡(jiǎn)寫. */
/* 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：當(dāng)前vw和vh中較小的一個(gè)值； */
/* vmax：當(dāng)前vw和vh中較大的一個(gè)值； */
/* vmin、vmax的作用：在做移動(dòng)端頁(yè)面開(kāi)發(fā)時(shí)，會(huì)使得文字大小在橫豎屏下保持一致。 */
--size: 150vmax;
/* grid-area 邊界的約定 */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-area */
grid-area: body;
content: "";
/* inline-size CSS 屬性影響一個(gè)元素的width 或 height，以改變一個(gè)元素的盒模型的水平或垂直大小 */
/* 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 用于檢測(cè)用戶的系統(tǒng)是否被開(kāi)啟了動(dòng)畫減弱功能 */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
body::before {
animation-duration: 0s;
}
}
/* 背景圖平移動(dòng)畫 */
@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ù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過(guò)最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。 */
/* https://www.cnblogs.com/lvonve/p/13816256.html */
/* clamp() 函數(shù)接收三個(gè)用逗號(hào)分隔的表達(dá)式作為參數(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>
