css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）

發布時間：2024-01-24閱讀(19)

導讀1.CSS動畫有哪些?transition過渡與animation動畫的區別是什么？1.transition過渡2.transform變形3.animati....1. CSS 動畫有哪些? transition過渡與animation動畫的區別是什么？

1. transition 過渡2. transform 變形3. animation 關鍵幀動畫

2. 首先介紹各個動畫的語法屬性2.1 transition 過渡

1. 語法: 1. transition: property duration timing-function delay 1. transition: 屬性是個復合屬性 2. transition-property: 規定設置過渡效果的 css 屬性名稱 3. transition-duration: 規定完成過渡效果需要多少秒或毫秒 4. transition-timing-function: 指定過渡函數, 規定速度效果的速度曲線 5. transition-delay: 指定開始出現的延遲時間2. 默認值分別為: all 0 ease 0; 1. 注: transition-duration 時長為 0, 不會產生過渡效果3. 改變多個 css 屬性的過渡效果時, 代碼示例: 1. a { transition: background 0.8s ease-in 0.3s, color 0.6s ease-out 0.3s; }4. 子屬性: 1. transition-property 1. transition-property: none |all |property; 1. 值為 none 時, 沒有屬性會獲得過渡效果 2. 值為 all 時, 所有屬性都將獲得過渡效果 3. 值為指定的 css 屬性應用過渡效果, 多個屬性用逗號隔開 2. color : background-color, border-color, color, outline-color ; 3. length : 真實的數字如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing, 4. integer : 離散步驟（整個數字）, 在真實的數字空間, 以及使用 floor()轉換為整數時發生如: outline-offset,z-index 5. number : 真實的（浮點型）數值, 如:zoom,opacity,font-weight 6. rectangle : 通過x, y, width 和 height（轉為數值）變換，如: crop 7. visibility : 離散步驟，在0到1數字范圍之內，0表示“隱藏”，1表示完全“顯示”,如：visibility 8. shadow : 作用于color, x, y 和 blur（模糊）屬性,如：text-shadow 9. background-image : 通過每次停止時的位置和顏色進行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數值以便執行動畫。 2. transition-duration 1. transition-duration: time; 1. 該屬性主要用來設置一個屬性過渡到另一個屬性所需的時間, 也就是從舊屬性過渡到新屬性花費的時間長度, 俗稱持續時間 3. transition-timing-function 1. transition-timing-function: linear| ease| ease-in| ease-out| ease-in-out| cubic-bezier(n,n,n,n); 1. 該屬性指的是過渡的 “緩動函數” 。主要用來指定瀏覽器的過渡速度, 以及過渡期間的操作進展情況, 解釋下: 2. 注意: 值 cubic-bezier(n,n,n,n) 可以定義自己的值, 如 cubic-bezier(0.42,0,0.58,1) 4. transition-delay 1. 這個屬性沒什么說的了, 就是過渡效果開始前的延遲時間, 單位秒或者毫秒

2.2 transform 變形

1. 可以利用 transform 功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理 1. 旋轉 rotate 1. 用法: transform: rotate(45deg); 2. 共一個參數 “角度”, 單位 deg 為度的意思, 正數為順時針旋轉, 負數為逆時針旋轉, 上述代碼作用是順時針旋轉45度 2. 縮放 scale 1. 用法: transform: scale(0.5) 或者 transform: scale(0.5, 2); 2. 一個參數時: 表示水平和垂直同時縮放該倍率 3. 兩個參數時: 第一個參數指定水平方向的縮放倍率, 第二個參數指定垂直方向的縮放倍率。 3. 傾斜 skew 1. 用法: transform: skew(30deg) 或者 transform: skew(30deg, 30deg); 2. 一個參數時: 表示水平方向的傾斜角度。 3. 兩個參數時: 第一個參數表示水平方向的傾斜角度, 第二個參數表示垂直方向的傾斜角度。 4. skew 的默認原點 transform-origin 是這個物件的中心點 4. 移動 translate 1. 用法: transform: translate(45px) 或者 transform: translate(45px, 150px); 2. 一個參數時: 表示水平方向的移動距離; 3. 兩個參數時: 第一個參數表示水平方向的移動距離, 第二個參數表示垂直方向的移動距離。2. 基準點 transform-origin 1. 在使用 transform 方法進行文字或圖像的變形時, 是以元素的中心點為基準點進行的。使用 transform-origin 屬性, 可以改變變形的基準點。 2. 用法: transform-origin: 10px 10px; 3. 表示相對左上角原點的距離, 單位 px, 第一個參數表示相對左上角原點水平方向的距離, 第二個參數表示相對左上角原點垂直方向的距離; 4. 兩個參數除了可以設置為具體的像素值, 其中第一個參數可以指定為 left、center、right, 第二個參數可以指定為 top、center、bottom。3. 多方法組合變形 1. 用法: transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px); 2. 這四種變形方法順序可以隨意, 但不同的順序導致變形結果不同, 原因是變形的順序是從左到右依次進行

2.3 animation 關鍵幀動畫

1. 在 CSS3 中創建動畫, 您需要學習 @keyframes 規則。2. @keyframes 規則用于創建動畫。在 @keyframes 中規定某項 CSS 樣式, 就能創建由當前樣式逐漸改為新樣式的動畫效果。3. 必須定義動畫的名稱和時長。如果忽略時長, 則動畫不會允許, 因為默認值是 0。4. 請用百分比來規定變化發生的時間, 或用關鍵詞 "from" 和 "to", 等同于 0% 和 100% 。5. 語法 1. animation: name duration timing-function delay iteration-count direction; 1. animation-name 規定需要綁定到選擇器的 keyframe 名稱 2. animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 3. animation-timing-function 規定動畫的速度曲線。默認是 "ease"。 4. animation-delay 規定動畫何時開始。默認是 0。 5. animation-iteration-count 規定動畫被播放的次數。默認是 1。 6. animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"; alternate (輪流),。 1. alternate (輪流): 動畫播放在第偶數次向前播放, 第奇數次向反方向播放 (animation-iteration-count 取值大于1時設置有效 2. 語法: animation-direction: alternate; 2. animation-play-state 規定動畫是否正在運行或暫停。默認是 "running" 播放; paused 暫停播放。 1. 語法: animation-play-state: paused; 3. animation-fill-mode 屬性規定動畫在播放之前或之后, 其動畫效果是否可見; 規定對象動畫時間之外的狀態; none | forwards | backwards | both 。 1. none: 不改變默認行為 (默認, 回到動畫沒開始時的狀態) 。 2. forwards: 當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義) (動畫結束后動畫停留在結束狀態) 。 3. backwards: 在 animation-delay 所指定的一段時間內, 在動畫顯示之前, 應用開始屬性值 (在第一個關鍵幀中定義) （動畫回到第一幀的狀態）。 4. both: 向前和向后填充模式都被應用（根據 animation-direction 輪流應用 forwards 和 backwords 規則）。 5. 語法: animation-fill-mode: forwards 1. 0% 是動畫的開始, 100% 是動畫的完成。

3. 接下來是常見的面試題目以及實現代碼3.1 transition 示例一

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(1)

3.2 transition 示例二

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動畫 - transition</title></head><style>* { margin: 0;}.w_outer { display: flex; justify-content: center; background-color: skyblue; height: 100vh;}nav { display: flex; width: 80%; height: 40px; gap: 40px;}a { flex: 1; background-color: #333; color: #fff; border: 1px solid; padding: 8px; text-align: center; text-decoration: none; transition: all 0.5s ease-out;}a:hover, a:focus { background-color: steelblue; color: #333;}</style><body> <div > <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact Us</a> <a href="#">Links</a> </nav> </div></body></html>

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(2)

3.3 transform 示例一

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(3)

3.4 transform 示例二

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(4)

3.4 A transform 示例三

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動畫 - transform -- 時鐘</title></head><style id="css">li{ list-style: none;}#w_outer{ width: 400px; height: 400px; position: absolute; top:calc(50% - 200px); left:calc(50% - 200px); border: 2px solid palegoldenrod;}#w_cont{ width: 200px; height: 200px; position: absolute; top:calc(50% - 100px); left:calc(50% - 100px); border: 2px solid cyan; border-radius: 50%;}.w_h-item{ width: 4px; height: 12px; position: absolute; top: 0; left: calc(50% - 2px); background-color: gray; transform-origin: 2px 100px;}.angle30{transform : rotate(30deg);}.angle60{transform : rotate(60deg);}.angle90{transform : rotate(90deg);}.angle120{transform : rotate(120deg);}.angle150{transform : rotate(150deg);}.angle180{transform : rotate(180deg);}.angle210{transform : rotate(210deg);}.angle240{transform : rotate(240deg);}.angle270{transform : rotate(270deg);}.angle300{transform : rotate(300deg);}.angle330{transform : rotate(330deg);}#fixPoint{ width: 10px; height: 10px; position: absolute; top:calc(50% - 5px); left:calc(50% - 5px); background-color: cadetblue; border-radius: 50%;}#hour{ width: 6px; height: 70px; position:absolute; top: 40px; left: calc(50% - 3px); background-color: darkblue; transform-origin: 50% 60px;}#minute{ width: 4px; height: 75px; position:absolute; top: 35px; left: calc(50% - 2px); background-color: yellow; transform-origin: 50% 65px;}#second{ width: 2px; height: 90px; position:absolute; top: 20px; left: calc(50% - 1px); background-color: red; transform-origin: 50% 80px;}</style><body><div id = "w_outer"> <div id = w_cont> <ul id = "w_hour-line"> <li class = "w_h-item"></li> <li class = "w_h-item angle30"></li> <li class = "w_h-item angle60"></li> <li class = "w_h-item angle90"></li> <li class = "w_h-item angle120"></li> <li class = "w_h-item angle150"></li> <li class = "w_h-item angle180"></li> <li class = "w_h-item angle210"></li> <li class = "w_h-item angle240"></li> <li class = "w_h-item angle270"></li> <li class = "w_h-item angle300"></li> <li class = "w_h-item angle330"></li> </ul> <div id = "fixPoint"></div>  <div id = "hour" ></div>  <div id = "minute" ></div>  <div id = "second" ></div> </div></div></div></body><script>window.onload = function(){ var hourHand = document.getElementById(hour); var minuteHand = document.getElementById(minute); var secondHand = document.getElementById(second); // 初始化(細節知識點: 如果這里不執行初始化, 在頁面顯示的內容會有一個閃屏的問題: 分針、時針、秒針，重疊在12點這個位置) initTime() // 執行定時器 setInterval(initTime, 1000) function initTime() { var nowTime = new Date(); // 求取時針角度(這里 -12 在顯示上是正確的) var hourVal = nowTime.getHours() - 12; var hourDeg = hourVal / 12 * 360 deg; // 求取分針角度 var minuteVal = nowTime.getMinutes(); var minuteDeg = minuteVal / 60 * 360 deg; // 求取秒針角度 var secondVal = nowTime.getSeconds(); var seconDeg = secondVal / 60 * 360 deg; // 原生方法: 利用 DOM 元素的 style 屬性設置 hourHand.style.transform = rotate( hourDeg ); minuteHand.style.transform = rotate( minuteDeg ); secondHand.style.transform = rotate( seconDeg ); }}</script></html>

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(5)

3.6 animation 示例一

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動畫 -- animation 關鍵幀動畫</title></head><style> p { width:300px; height:300px; background:red; animation:myfirst 3s infinite alternate; /* //Firefox */ -moz-animation:myfirst 3s infinite alternate; /* // Safari and Chrome */ -webkit-animation:myfirst 3s infinite alternate; /* // Opera */ -o-animation:myfirst 3s infinite alternate; } @keyframes myfirst { from {background:red;} to {background:yellow;} } /* // Firefox */ @-moz-keyframes myfirst { from {background:red;} to {background:yellow;} } /* // Safari and Chrome */ @-webkit-keyframes myfirst { from {background:red;} to {background:yellow;} } /* // Opera */ @-o-keyframes myfirst { from {background:red;} to {background:yellow;} }</style><body> <p>無限循環播放動畫效果</p></body></html>

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(6)

3.7 animation 示例二

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 動畫 -- animation 關鍵幀動畫</title></head><style>p { background-color: skyblue; font: 96px "Microsoft Yahei"; font-weight: 500; text-align: center; color: #f35626; cursor: pointer;}p:hover { animation:rubberBand 1.5s;}@-webkit-keyframes rubberBand{ 0%{ -webkit-transform:scale(1); transform:scale(1) } 30%{ -webkit-transform:scaleX(1.25) scaleY(0.75); transform:scaleX(1.25) scaleY(0.75) } 40%{ -webkit-transform:scaleX(0.75) scaleY(1.25); transform:scaleX(0.75) scaleY(1.25) } 60%{ -webkit-transform:scaleX(1.15) scaleY(0.85); transform:scaleX(1.15) scaleY(0.85) } 100%{ -webkit-transform:scale(1); transform:scale(1) }}@keyframes rubberBand{ 0%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) } 30%{ -webkit-transform:scaleX(1.25) scaleY(0.75); -ms-transform:scaleX(1.25) scaleY(0.75); transform:scaleX(1.25) scaleY(0.75) } 40%{ -webkit-transform:scaleX(0.75) scaleY(1.25); -ms-transform:scaleX(0.75) scaleY(1.25); transform:scaleX(0.75) scaleY(1.25) } 60%{ -webkit-transform:scaleX(1.15) scaleY(0.85); -ms-transform:scaleX(1.15) scaleY(0.85); transform:scaleX(1.15) scaleY(0.85) } 100%{ -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1) }}</style><body><div> <p>Animate.css</p></div></body><script></script></html>

展示效果如圖所示:

css在網頁中使用的方式有哪幾種（CSS面試題CSS動畫實現方式以及它們之間的區別）(7)