我們可以使用 CSS 新增過渡到 HTML 元素。在開始本教學之前,讓我們先了解什麼是過渡。基本上,轉換是元素從一種狀態變成另一種狀態。例如,當使用者將滑鼠懸停在元素上時,我們會更改元素的尺寸。
在 CSS 中,我們可以使用兩種方式來為元素添加過渡。首先是同時使用「transition-property」、「transition-duration」、「transition-timing-function」和「transition-delay」這四個屬性。第二種是僅使用「transition」CSS 屬性。
CSS「transition」屬性是以下 CSS 屬性的簡寫。
Transition-property - 它指定我們需要套用過渡效果的 CSS 屬性。如果我們需要對所有屬性套用轉換,我們可以使用「all」作為值。
Transition-duration - 過渡效果的總時間(以秒為單位)。
Transition-timing-function - 它決定轉換應如何進行。過渡計時函數的範例有「liner」、「ease-in」、「ease-out」、「ease-in-out」等。
Transition-delay - 這是過渡效果開始後的一段時間。
使用者可以依照以下語法將過渡簡寫與多個 CSS 屬性一起使用。
element { transition: Property duration timing-function delay; }
在上面的語法中,第一個值是轉換屬性,第二個值是轉換持續時間,第三個值是計時函數,最後一個值是轉換延遲。
在下面的範例中,我們有一個尺寸為 200 x 200 的 div 元素,並且我們在 div 元素的高度上添加了持續 2 秒的過渡效果。這裡,轉換延遲為0.5秒,計時功能為「ease-in-out」。
使用者可以將滑鼠停留在 div 元素上來觀察過渡效果。我們可以觀察到 div 元素的高度是平滑增加的,而不是立即增加的。
<html> <head> <style> /* adding transition effect on the element */ .element { width: 500px; height: 200px; background-color: red; color: white; font-size: 25px; transition: height 2s ease-in-out 0.5s; } .element:hover { height: 400px; background-color: green; } </style> </head> <body> <h3>Using the <i> transition property </i> of CSS to add transition to the element</h3> <div class = "element"> This div contains the texts. <p> Hover over this div and wait to see the changes </p> </div> </body> </html>
在下面的範例中,div 元素的初始 margin-left 為 2px。當使用者將滑鼠懸停在 div 元素上時,我們將 margin-left 增加到 100px。我們在 div 元素的 margin-left CSS 屬性上新增了延遲 0.5 秒後持續 2 秒的過渡效果。
在輸出中,將滑鼠懸停在 div 元素上,該元素將在 2 秒內向右移動 100px。
<html> <head> <style> /* adding transition effect on the element */ .element { width: 200px; height: 200px; background-color: blue; color: white; font-size: 25px; margin-left: 2px; border-radius: 12px; transition: margin-left 2s ease-in-out 0.5s; } .element:hover { margin-left: 100px; } </style> </head> <body> <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3> <p> Hover over the below div and wait to see the changes. </p> <div class = "element"> This div contains the texts. </div> </body> </html>
在下面的範例中,我們為多個 CSS 屬性添加了過渡效果。在這裡,我們為「margin-left」、「height」、「width」、「background-color」、「color」和「font-size」CSS屬性添加了2秒的過渡效果。
在輸出中,使用者可以觀察到所有 CSS 屬性的轉換都很平滑。但是,我們可以使用「all」作為「transition-property」的值來為所有屬性新增過渡。
<html> <head> <style> /* adding transition effect on the element */ .element { width: 200px; height: 200px; background-color: blue; color: white; font-size: 25px; margin-left: 2px; border-radius: 12px; transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s; } .element:hover { margin-left: 100px; height: 400px; width: 400px; background-color: aqua; color: black; font-size: 40px; } </style> </head> <body> <h3> Using the <i> transition property </i> of CSS to add transition to the element </h3> <p> Hover over the bellow div to see the achennges</p> <div class = "element"> Square div element. </div> </body> </html>
使用者學會了使用「transition」CSS 屬性,這是與過渡相關的多個 CSS 屬性的簡寫。在這裡,我們已經學會了在上面的三個範例中使用「transition」CSS屬性。在上一個範例中,我們為多個 CSS 屬性新增了過渡效果。
以上是CSS 中具有多個屬性的過渡簡寫?的詳細內容。更多資訊請關注PHP中文網其他相關文章!