首頁 >web前端 >css教學 >CSS 中具有多個屬性的過渡簡寫？

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

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

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中文網其他相關文章！

css html Property function margin background transition

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：我怎麼才能取得一個網站的HTML/CSS/JavaScript原始碼？下一篇：我怎麼才能取得一個網站的HTML/CSS/JavaScript原始碼？

看更多