參考效果地址：CSS背景圖無限循環(huán)滾動(dòng)動(dòng)畫

或許你主要想實(shí)現(xiàn)背景傾斜移動(dòng)的效果，但這里也會(huì)給你介紹點(diǎn)其他知識(shí)點(diǎn)～ 首先如果你想要實(shí)現(xiàn)背景這樣的，方法有很多，只要有一張圖，和animation動(dòng)畫就" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > CSS+HTML<循環(huán)滾動(dòng)背景效果>

CSS+HTML<循環(huán)滾動(dòng)背景效果>

時(shí)間：2023-09-08 13:30:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-08 13:30:02 來源：網(wǎng)站運(yùn)營(yíng)

CSS+HTML<循環(huán)滾動(dòng)背景效果>：

參考效果地址：CSS背景圖無限循環(huán)滾動(dòng)動(dòng)畫

或許你主要想實(shí)現(xiàn)背景傾斜移動(dòng)的效果，但這里也會(huì)給你介紹點(diǎn)其他知識(shí)點(diǎn)～ 首先如果你想要實(shí)現(xiàn)背景這樣的，方法有很多，只要有一張圖，和animation動(dòng)畫就行了！

svg圖片地址，接下來就是讓重疊動(dòng)起來，代碼直接放最下面了就。

知識(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è)面開發(fā)時(shí)，會(huì)使得文字大小在橫豎屏下保持一致。 */ --size: 150vmax;3.inline-size屬性影響一個(gè)元素的width 或 height，以改變一個(gè)元素的盒模型的水平或垂直大小;

4.prefers-reduced-motion 用于檢測(cè)用戶的系統(tǒng)是否被開啟了動(dòng)畫減弱功能

@media (prefers-reduced-motion: reduce) { body::before { animation-duration: 0s; } }5.clamp()函數(shù) 的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。

/* clamp() 函數(shù)接收三個(gè)用逗號(hào)分隔的表達(dá)式作為參數(shù)，按最小值、首選值、最大值的順序排列 */font-size: clamp(3rem, 10vmin, 6rem);
  1. :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è)面開發(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)是否被開啟了動(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è)值超過最小值和最大值的范圍時(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>

關(guān)鍵詞：背景,效果,滾動(dòng),循環(huán)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉