首頁  >  文章  >  web前端  >  CSS 中具有多個屬性的過渡簡寫?

CSS 中具有多個屬性的過渡簡寫?

WBOY
WBOY轉載
2023-09-01 20:21:02978瀏覽

CSS 中具有多个属性的过渡简写?

我們可以使用 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;
}

在上面的語法中,第一個值是轉換屬性,第二個值是轉換持續時間,第三個值是計時函數,最後一個值是轉換延遲。

範例 1

在下面的範例中,我們有一個尺寸為 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>

範例 2

在下面的範例中,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>

範例 3

在下面的範例中,我們為多個 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中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除