如何使用 CSS 在一個元素上建立多個過渡？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 CSS 在一個元素上建立多個過渡？

王林

Aug 26, 2023 pm 01:37 PM

如何使用 CSS 在一个元素上创建多个过渡？

使用 CSS 在元素上建立多個過渡是為網站增添趣味和互動性的好方法。透過合併各種過渡，我們可以為用戶創建動態且引人入勝的體驗。在本文中，我們將介紹如何使用 CSS 在元素上建立多個過渡的基礎知識。

層疊樣式表 (CSS) 是用來設計網頁樣式的強大工具。其最有用的功能之一是能夠在元素的不同狀態之間創建平滑且具有視覺吸引力的過渡，例如當將其懸停或單擊時。

什麼是 CSS 轉換？

在了解如何創建多個過渡之前，我們首先了解什麼是 CSS 過渡。過渡是元素的兩種狀態之間的逐漸變化。例如，當我們將滑鼠懸停在按鈕上時，其背景顏色逐漸從一種顏色變為另一種顏色。 CSS 允許我們指定這些轉換的持續時間和計時，以及正在轉換的屬性。

文法

css-selector{
   transition: property duration timing-function delay;
}

CSS 中的過渡屬性

我們可以在 CSS 中使用的過渡屬性包括 -

transition-property - 此屬性指定要轉換哪些 CSS 屬性。
transition-duration - 此屬性指定轉換的持續時間（以秒或毫秒為單位）。預設情況下，過渡持續時間為 0，這表示沒有應用過渡效果。
transition-timing-function - 此屬性控制轉換的速度和時間。
transition-delay - 此屬性指定轉換開始前的延遲。

建立基本轉換

要建立過渡，我們需要指定要設定動畫的屬性，例如過渡的持續時間、計時函數和任何延遲。例如，要為按鈕的寬度建立過渡，為此我們可以使用以下程式碼 -

button {
   transition: width 0.5s ease-in-out;
}

上面的程式碼指定按鈕的寬度將使用緩入調出計時函數在 0.5 秒的時間內過渡。

建立多個過渡

要在元素上建立多個過渡，我們需要在 CSS 程式碼中新增其他過渡。例如，要建立一個同時轉換寬度和背景顏色屬性的按鈕，為此我們可以使用以下程式碼 -

button {
   transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

上面的程式碼指定按鈕的寬度和背景顏色屬性將使用緩入調出計時函數在 0.5 秒的時間內進行轉換。

以下是一些完整的程式碼範例，說明如何使用 CSS 在元素上建立多個過渡 -

範例 1

在此範例中，我們將建立一個可轉換寬度和背景顏色屬性的按鈕。但是，我們將為每個過渡使用不同的持續時間來創建交錯效果。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 100px;
         height: 50px;
         background-color: green;
         border: none;
         color: #fff;
         font-size: 16px;
         padding: 10px 20px;
         transition: width 0.5s ease-in, background-color 1s ease-out;
      }
      button:hover {
         width: 150px;
         background-color: red;
      }
   </style>
</head>
   <body>
      <h3 id="Multiple-Transitions-with-Different-Durations">Multiple Transitions with Different Durations</h3>
      <button>Hover Me</button>
   </body>
</html>

在上面的範例中，我們為按鈕設定了100px的寬度和綠色的background-color。然後，我們設定過渡屬性來過渡寬度和背景顏色屬性。但是，我們對寬度過渡使用 0.5 秒的持續時間，對背景顏色過渡使用 1 秒的持續時間。這會產生交錯效果，其中按鈕寬度的過渡速度快於背景顏色。當滑鼠懸停在按鈕上時，寬度會擴展為150px，並且背景顏色將變為紅色。

範例 2

在此範例中，我們將建立一個同時轉換背景顏色和邊框半徑屬性的方塊。但是，我們將為邊界半徑過渡使用延遲。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      .box {
         margin: auto;
         width: 200px;
         height: 200px;
         background-color: red;
         border-radius: 50%;
         transition: background-color 0.5s ease-in-out, border-radius
         0.5s ease-in-out 0.5s;
      }
      .box:hover {
         background-color: blue;
         border-radius: 0;
      }
   </style>
</head>
   <body>
      <h3 id="Multiple-Transitions-with-Delays">Multiple Transitions with Delays</h3>
      <div> Hover over the below circle to see multiple transitions</div>
      <div class="box"></div>
   </body>
</html>

在上面的範例中，我們將框的寬度和高度設定為 200px，背景顏色設定為紅色。然後，我們設定過渡屬性來過渡背景顏色和邊框半徑屬性。然而，我們對邊界半徑過渡使用 0.5 秒的延遲。這意味著背景顏色將立即過渡，而邊框半徑將等待 0.5 秒後再過渡。當滑鼠懸停在該框上時，背景顏色將變更為藍色，邊框半徑將變為 0，從而創建一個正方形。

範例 3

在這裡，我們將建立一個可以轉換寬度和顏色屬性的按鈕。但是，我們將為每個轉換使用不同的計時函數來創建獨特的效果。

<html>
<head>
   <style>
      body{
         text-align: center;
      }
      button {
         margin: auto;
         width: 120px;
         height: 60px;
         background-color: blue;
         border: none;
         color: red;
         font-size: 18px;
         padding: 10px 20px;
         transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
         color 1s ease-in-out;
      }
      button:hover {
         width: 180px;
         color: #fff;
      }
   </style>
</head>
   <body>
      <h3 id="Multiple-Transitions-with-Different-Timing-Functions">Multiple Transitions with Different Timing Functions</h3>
      <button>Hover Me</button>
   </body>
</html>

在上面的範例中，我們設定按鈕的寬度為 120px，背景顏色為藍色，然後設定過渡屬性以過渡寬度和顏色屬性。然而，我們為每個轉換使用不同的計時函數。寬度過渡使用自訂的三次貝塞爾函數。當滑鼠懸停在按鈕上時，寬度擴展為 180px，文字顏色將從紅色變為白色。