動畫-animation
動畫-animation與?transition過渡動畫的區別
- ?transition過渡動畫：實現兩個狀態間的變化過程
- 動畫animation：實現多個狀態間的變化過程，動畫過程可控（重復播放、最終畫面、是否暫停）
走馬燈-使用transition.html
<!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>* {padding: 0;margin: 0;}.box {width: 600px;height: 110px;border: 5px solid #000;margin: 100px auto;overflow: hidden; /* .box父元素里的子元素的高度超出了父容器的高度 發生外溢 添加overflow: hidden超出規定寬高的(溢出)內容會被裁剪掉(不可見) */}/* ul里的所有子元素li都是 塊級元素 垂直獨占一行的 我們的要求是要讓所有的子元素li水平排列 都在一行 給ul添加 彈性盒子屬性 display: flex; */.box ul {background-color: pink;display: flex;transition: all 10s;}li {list-style: none;}/* img 是行內元素 設置寬高無效 轉為塊級元素 設置寬高有效 */img {display: block;width: 200px;}.box:hover ul {transform: translate(-1400px); /* translate()只寫一個值，表示沿著X軸水平方向移動 */}</style>
</head>
<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 替身：填補顯示區域的露白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div>
</body>
</html>
走馬燈-使用animation.html
<!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>* {padding: 0;margin: 0;}.box {width: 600px;height: 110px;border: 5px solid #000;margin: 100px auto;overflow: hidden; /* .box父元素里的子元素ul的寬度高度(width: 800px; height: 210px;)超出了父容器的寬度高度(width: 600px;height: 110px;) 發生外溢 添加overflow: hidden將子元素ul 超出規定寬高的(溢出)內容會被裁剪掉(不可見) */}/* ul里的所有子元素li都是 塊級元素 垂直獨占一行的 我們的要求是要讓所有的子元素li水平排列 都在一行 給ul添加 彈性盒子屬性 display: flex; */.box ul {width: 800px;height: 210px;background-color: pink;display: flex;/* transition: all 10s; *//* 一進入界面執行動畫: 10s完成一次移動動畫:讓ul元素向X軸從0左邊負方向移動1400px。 無線循環 勻速 */animation: move 10s infinite linear ; }li {list-style: none;}/* img 是行內元素 設置寬高無效 轉為塊級元素 設置寬高有效 */img {display: block;width: 200px;}/* 定義位移動畫；ul使用動畫；鼠標懸停暫停動畫 */@keyframes move {0% {transform: translate(0); /* ul元素 開始不需要移動在X軸0位置 */}100% {transform: translate(-1400px); /* 讓ul元素 向X軸從0左邊負方向移動1400pxtranslate()只寫一個值，表示沿著X軸水平方向移動 */}}.box:hover ul {/* transform: translate(-1400px); translate()只寫一個值，表示沿著X軸水平方向移動 */animation-play-state: paused;}</style>
</head>
<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li> <!-- ? 無縫動畫填補空白區域 ? 替身：復制前3張圖片到區域尾部,填補區域尾部的露白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li> </ul></div>
</body>
</html>
?
?
無縫動畫填補區域尾部空白：
為什么要使用無縫動畫:?元素(圖片)移動 在區域尾部有空白區域
無縫動畫原理：復制開頭圖片到結尾位置 填補尾盤區域的空白區域,讓元素(圖片)累加寬度=區域寬度
<body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li> <!-- ? 無縫動畫填補空白區域 ? 替身：復制前3張圖片到區域尾部,填補區域尾部的露白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li> </ul></div>
</body>?實現動畫animation的步驟:
1.定義動畫的關鍵幀：使用 @keyframes 規則定義動畫在不同階段的樣式。
@keyframes:
@keyframes 是用來指定 CSS 動畫過程中，在特定時間點需要應用的樣式規則。你可以在 @keyframes 內部定義動畫序列中的關鍵幀（即動畫的不同狀態），然后瀏覽器會自動計算這些關鍵幀之間的過渡效果。
動畫名稱：
是用于標識這個動畫的唯一名稱，以便于在其他地方引用它。
這種格式只指定了動畫的起點(from)和終點(to)的狀態。
@keyframes 動畫名稱 {
from { width: 200px; }
to { width: 800px; }
}?
這種格式允許你更精確地控制動畫過程中不同百分比處的狀態，提供了更高的靈活性和控制力。
@keyframes 動畫名稱 {
0% { /* 起始狀態 */ }?
20% { /* 中間某個時刻的狀態 */ }
...
100% { /* 結束狀態 */ }
}
2.應用動畫到元素上：通過 animation 屬性將定義好的動畫應用到特定的 HTML 元素上，并設置相關的屬性如持續時間、播放次數等。
最全版不是所有的屬性都必須填寫 animation: animation-name 動畫名稱animation-duration 動畫時長animation-timing-function 速度曲線 animation-delay 延遲時間animation-iteration-count 重復次數animation-direction 動畫方向animation-fill-mode; 執行完畢時狀態 animation:動畫名稱 動畫花費時長;(最簡版這2個屬性必須填寫)注意:
- 動畫名稱和動畫時長必須賦值
- 取值不分先后順序
- 如果有兩個時間值，第一個時間表示動畫時長，第二個時間表示延遲時間
屬性 作用 取值 animation-name 動畫名稱
定義要使用的 @keyframes 動畫名稱
必需 animation-duration 動畫時長
動畫完成一個周期所需的時間（如 2s）
必需 animation-delay 延遲時間
動畫開始前的延遲時間（可為負值）
animation-fill-mode 動畫執行完畢時的狀態
?none（不保留任何樣式）
forwards（保留最后一幀樣式）
backwards（保留第一幀樣式）
both（同時保留首尾幀樣式）animation-timing-function 動畫的速度曲線（緩動函數），如 ease, linear, ease-in-out
ease（默認）
steps(n)：分步動畫?
?分n個步驟完成這個動畫效果
linear??勻速
ease-in
ease-out
ease-in-out : 動畫開始和結束時較慢，中間較快animation-iteration-count 動畫重復播放次數
（如 1, infinite 表示無限循環）
infinite為無限循環 animation-direction 動畫執行方向
normal（默認，正常播放）
reverse（倒序播放）
alternate（正向播放完后反向播放）
alternate-reverse（反向播放完后正向播放）animation-play-state 暫停動畫 paused為暫停，
通常配合:hover使用
動畫animation各種使用情況案例:
<!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>*{margin: 0;padding: 0;}/* 給動畫元素定義基礎樣式 */.box {background-color: #4CAF50; /* 綠色背景 */width: 200px; /* 初始寬度 */height: 100px; /* 固定高度 */margin: 50px auto; /* 居中顯示 *//*transition: width 2s ease; 添加過渡效果（非必須） */}/* 定義動畫的關鍵幀 */
@keyframes 擴展寬度 {from { /* 動畫開始時的樣式 */width: 200px;}to { /* 動畫結束時的樣式 */width: 800px;}}.animated-box:hover{animation: 擴展寬度 5s;/* linear：勻速 */animation: 擴展寬度 5s linear;/* steps：分步動畫，工作中，配合精靈圖實現精靈動畫 *//* 我們這里是單純的逐幀動畫 這里沒有精靈圖片 */animation: 擴展寬度 5s steps(13); /* 如果有兩個時間，第一個是動畫時長，第二個是延遲時間 */animation: 擴展寬度 3s 5s; animation: 擴展寬度 3s 3; /* 重復次數，infinite：無限循環 */animation: 擴展寬度 3s infinite; /* alternate：反向 */animation: 擴展寬度 3s infinite alternate;/* 動畫執行完畢時的狀態， forwards：結束狀態； backwards：開始狀態（默認） */animation: 擴展寬度 3s forwards; animation: 擴展寬度 3s backwards;
}/* 動畫二：從 200*100 變化到 300*300 變化到800*500 *//* 百分比：表示的意思是動畫時長的百分比 */@keyframes 擴展寬度2 {0% {width: 200px;height: 100px;}20% {width: 300px;height: 300px;}100% {width: 800px;height: 500px;}}/* 定義關鍵幀動畫 */@keyframes 擴展寬度3 {0% {transform: translateX(0) scale(1); /* 初始位置和大小 */background-color: lightblue;}50% {transform: translateX(200px) scale(1.2); /* 中間放大并右移 */background-color: lightgreen;}100% {transform: translateY(100PX) scale(1.5); /* 下移放大 */background-color: lightcoral;}} .animated-box2:hover{animation: 擴展寬度2 5s;
}/* 應用動畫到元素上 */
.animated-box3:hover{animation-name: 擴展寬度3; /*使用的動畫名稱為 擴展寬度3 */ animation-duration: 5s; /* 動畫持續時間5s */ animation-timing-function: ease-in-out; /* 動畫速度曲線 */ /* 動畫開始和結束時較慢，中間較快 */animation-delay: 3s; /* 延遲3秒后開始動畫 */ animation-iteration-count: 3; /* 動畫重復播放3次 */animation-direction: alternate; /* 動畫在正向和反向之間交替 */ /* 第一次正向播放，第二次反向播放，第三次再正向播放 */ animation-fill-mode: forwards; /* 動畫結束后保持最后一幀樣式 */
}/* 使用animation
你可以將所有動畫屬性合并成一行：
這樣更簡潔，但建議初學者先分開寫，便于理解和調試。 */
.animated-box4:hover{animation: 擴展寬度3 5s ease-in-out 3s 3 alternate forwards;
}</style>
</head>
<body><!-- 創建一個div元素用于應用動畫 -->
<div class="box animated-box" ><!-- 這個div內部可以放置任何內容，這里為空 -->
</div><div class="box animated-box2" ><!-- 這個div內部可以放置任何內容，這里為空 -->
</div><div class="box animated-box3" ><!-- 這個div內部可以放置任何內容，這里為空 -->
</div><div class="box animated-box4" ><!-- 這個div內部可以放置任何內容，這里為空 -->
</div><div class="box animated-box5" ><!-- 這個div內部可以放置任何內容，這里為空 -->
</div></body>
</html>?steps(n):?分步/逐幀/分幀 動畫
steps(n) 是 CSS 中用于定義動畫速度曲線的一個特定值，它允許你將動畫分割成幾個離散的步驟（即幀）來進行，而不是平滑過渡。
這意味著動畫不是連續地進行，而是以跳躍的方式從一個狀態直接切換到下一個狀態，每個狀態之間的轉換是瞬間完成的。
應用場景
steps() 主要應用于逐幀動畫，尤其是當你處理像精靈圖這樣的資源時非常有用。例如，如果你有一個包含多個動作姿勢的圖片序列（比如角色行走、跑步等），你可以利用 steps() 函數精確控制這些姿勢如何以及何時顯示，從而創建流暢的角色動畫效果。
注意事項
- 精靈圖必須連續且等寬，否則動畫會錯位。
- 使用 steps(n) 是關鍵，它讓動畫不會平滑過渡，而是“跳變”。
- 如果你希望動畫在開始時立刻跳到第一幀，可以寫成 steps(4, start)。
- 圖片加載失敗時可能看不到動畫效果，請確保圖片地址有效。
?steps(n)函數
steps(number_of_steps, direction)
- number_of_steps: 整數值，表示動畫應該分為多少個步驟或幀進行。
- direction: 可選值，指定步進的方向。它可以取兩個值：
start: 第一步在動畫開始時立即發生。
end: 最后一步在動畫結束時發生（默認值）。
steps(n)逐幀動畫?+精靈圖片的結合使用:模擬人物原地踏步
精靈動畫制作步驟:
1.準備一個顯示區域(元素盒子)
- 元素盒子(顯示區域)尺寸大小=一張精靈小圖尺寸相同=140px
2.定義動畫
- 移動背景圖(精靈圖)（移動距離范圍=精靈圖寬度=1680px）
3.使用逐幀動畫steps(n)：?
- steps(N)，N與精靈小圖個數相同
??animation: jingling_runing ?3s steps(12) infinite;
? ? 這個動畫 在3s內分成12步讓背景圖(精靈圖)沿X軸向左移動(1680px)動畫 ?且無限重復 ?
? ? 注意:這個動畫只是讓背景圖(精靈圖)沿X軸向左移動 ? ?元素div盒子是不動的
? background-position: 0 0; ?
? x=0 ? ? ? 背景圖(精靈圖) ? 在X軸原來默認位置0不動 ? 此時 元素盒子 顯示的 背景圖(精靈圖)的第一個小人? ??
?background-position: -1680px 0;? ?
?x=-1680px ? ? 背景圖(精靈圖)沿X軸向左移動1680px ? 此時 元素盒子 顯示的 背景圖(精靈圖)的第12個小人? ?
<!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>*{margin: 0;padding: 0;}/* 給動畫元素定義基礎樣式 */div {/* 元素盒子尺寸大小=一張精靈小圖尺寸相同 */width: 140px; height: 140px;border: 1px solid #000; background-image: url(./images/bg2.png);}@keyframes jingling_runing { from {background-position: 0 0; /* x=0 背景圖(精靈圖) 在X軸原來默認位置0不動 此時 元素盒子 顯示的 背景圖(精靈圖)的第一個小人 */}to {background-position: -1680px 0; /* x=-1680px 背景圖(精靈圖)沿X軸向左移動1680px 此時 元素盒子 顯示的 背景圖(精靈圖)的第12個小人 */}}div:hover{/* 這個動畫 在3s內分成12步讓背景圖(精靈圖)沿X軸向左移動(1680px)動畫 且無限重復 注意:這個動畫只是讓背景圖(精靈圖)沿X軸向左移動 元素div盒子是不動的 */animation: jingling_runing 3s steps(12) infinite;} </style>
</head>
<body><div></div>
</body>
</html>
?
多組動畫組合?
animation:
動畫1，
動畫2，
動畫N animation:
jingling_runing 3s steps(12) infinite,div_move 12s 4s forwards linear ;多組動畫組合+?steps(n)逐幀動畫?+精靈圖片的結合使用:
模擬人物真實步行前行
多組動畫組合
??
? ??第一個動畫:jingling_runing 3s steps(12) infinite :?
? ?只是讓背景圖(精靈圖)沿X軸向左移動-1680px ? ?元素div盒子是不動的
? (?steps(n)逐幀動畫 +精靈圖片的結合使用,只是模擬人物原地踏步)?
??? ?第二個動畫 : ?div_move 12s 4s forwards linear:? ? ?
?讓元素div盒子沿X軸向右移動1680px
?(讓人物離開原地,真實步行前行)
? ?
<!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>*{margin: 0;padding: 0;}/* 給動畫元素定義基礎樣式 */div {/* 元素盒子尺寸大小與一張精靈小圖尺寸相同 */width: 140px;height: 140px;border: 1px solid #000; background-image: url(./images/bg2.png);}@keyframes jingling_runing {from {background-position: 0 0; }to {background-position: -1680px 0; }}@keyframes div_move {0% {transform: translate(0);} 100% {transform: translate(1680px);}}/* 多組動畫組合 第一個動畫:jingling_runing 3s steps(12) infinite 只是讓背景圖(精靈圖)沿X軸向左移動-1680px 元素div盒子是不動的第二個動畫 : div_move 12s 4s forwards linear 讓元素div盒子沿X軸向右移動1680px */div:hover{animation: jingling_runing 3s steps(12) infinite,div_move 12s 4s forwards linear ;}</style>
</head>
<body><div></div>
</body>
</html>
移動端網頁適配
同一個網頁項目 在不同的型號手機上打開? ?項目界面顯示的分辨率不同 需要對項目網頁界面分辨率進行適配在不同手機上顯示都正常不會變形
如何打開谷歌瀏覽器上的手機模擬器
谷歌瀏覽器界面右擊:檢查->選中 圖標?
->選擇尺寸:三角
->選擇不同型號的手機
屏幕分辨率
屏幕分辨率： 一塊屏幕上的水平垂直上的像素點個數，單位是px
? 水平上有多少個像素點數? 就表示寬的分辨率
?垂直上有多少個像素點數? 就表示高的分辨率
PC(電腦)分辨率
我的電腦? 物理分辨率(硬件分辨率)（出廠設置）: 1920*1080
? ? ? ? ? ? ?默認縮放100%
? ? ? ? ? ? 系統的邏輯分辨率（軟件/驅動設置） :1920*1080?? ? ? ? ? ? 系統的所有 UI 元素默認顯示大小不變
?什么是“物理分辨率”？
顯示區域
物理分辨率指的是你的顯示器實際擁有的像素數量。
比如你電腦屏幕是 1920×1080，表示它橫向有 1920 個像素點，縱向有 1080 個像素點。這是顯示器硬件決定的，不可更改。
什么是“邏輯分辨率”？
系統的繪制界面UI元素區域
邏輯分辨率是操作系統或瀏覽器在渲染內容時使用的“虛擬”分辨率。
它會根據縮放比例發生變化。在縮放為 100% 的情況下，操作系統不會對內容進行放大或縮小，而是直接按照原始尺寸渲染。
“縮放 100%”是什么意思？
所有 UI 元素（文字、圖標、按鈕等）都顯示為它們設計時的原始大小；
沒有放大也沒有縮小；
每個像素對應一個真實的屏幕像素。系統沒有做任何額外的圖像處理，原樣顯示。
所以：
默認縮放 100%下?,邏輯分辨率 = 物理分辨率 = 1920×1080,所有 UI 元素默認顯示大小不變
?? 縮放的本質
?簡單理解:
? ? 縮放的本質是：操作系統以較低的邏輯分辨率繪制界面UI元素，然后將界面UI元素? 放大適當比例? ? 已達到鋪滿物理分辨率的效果，從而讓內容看起來更大、更清晰。
? ?詳細理解:?
? ?? 系統設置縮放為 100% 時:
? ?我的電腦操作系統的邏輯分辨率就是 1920×1080
? ?系統就使用這個邏輯分辨率1920×1080? 進行繪制界面UI元素
? ?而這個? 邏輯分辨率1920×1080 剛好等于? 物理分辨率1920×1080
? ?所以繪制界面UI元素顯示默認大小不變 不需要放大縮小 剛好鋪滿 屏幕的物理分辨率1920×1080
? ?
? ??系統設置縮放為 150% 時:
? ?我的電腦操作系統的邏輯分辨率就變成 1280×720 ( 1920/150%=1280 1080/150%=720)
? ?系統就使用這個邏輯分辨率1280×720? 進行繪制界面UI元素? ??
? ?很明顯這個邏輯分辨率1280×720小于 物理分辨率1920×1080
? ?為了將繪制界面UI元素鋪滿 整個屏幕的物理分辨率1920×1080?
? ?所以不得不將UI元素放大1.5倍 已達到鋪滿屏幕的物理分辨率1920×1080的效果
? ?? 如果系統就使用這個邏輯分辨率1280×720 下進行繪制界面UI元素? 不放大UI元素 也不鋪滿, 就會出現四周空白區域。
? ?
?我的電腦 默認縮放 100%? 與放大150%對比前后變化
| 項目? ? | 縮放 100% （默認無放大/縮小） | 縮放 150% |
| 物理分辨率 (顯示區域) | 1920×1080? ? | 1920×1080（不變） |
| 邏輯分辨率 (系統的繪制界面UI元素區域) | 1920×1080 | 1280×720（系統認為的繪圖空間） 1920/150%=1280 1080/150%=720 |
| UI 元素大小? | 正常 所有 UI 元素按原始尺寸顯示 | 所有 UI 元素放大1.5倍 |
| 1個邏輯像素 1×1 = 1 個物理像素 | 1個邏輯像素 1.5×1.5 = 2.25 個物理像素? | |
| 視覺感受 | ?所有 UI 元素默認顯示大小不變 | ? UI 元素顯示變大 填滿 屏幕(物理分辨率1920×1080?)? |
? ?
? ?
?
? ? ? ~
?? ?
假設你有一個圖標，設計成 64×64 像素大小：
| 縮放比例 | 物理分辨率 (顯示區域) | 邏輯分辨率 (繪制界面UI元素區域) | ? UI元素圖標 顯示大小 （像素） | 用戶感受 |
| 100% | 1920×1080 | 1920×1080 | ?UI元素大小不變?64×64 | ? ? 正常大小 |
| 150% | 1280×720 | 1920×1080? | ? UI元素放大1.5倍實際占用 96×96 (64*1.5=96 | 字體變大了，更容易看清楚 ，剛好鋪滿 物理分辨率 (顯示區域) |
| UI元素不放大就是用?64×64大小 | UI元素沒有鋪滿 物理分辨率 (顯示區域) 四周就會留白 |
?? ?
?
? ? ?
?
?
DPR（設備像素比）
DPR = 物理像素 / 邏輯像素縮放 100%：DPR = 1
- ? ?每個 CSS 的像素（即邏輯像素） 占用了 1×1 = 1 個物理像素
? ?
? ?
縮放 150%：DPR = 1.5
- ??每個 CSS 的像素（即邏輯像素） 占用了 1.5×1.5 = 2.25 個物理像素?
?
手機的分辨率
移動端項目的網頁適配方案:
?
 時間操作)
