如何在CSS中透過懸停在一個分割元素上逐漸改變寬度？-css教學-PHP中文網

例子

過渡屬性

使用過渡作為解決方案

Example of using transition property to increase width gradually on hover.

結論

首頁

web前端

css教學

如何在CSS中透過懸停在一個分割元素上逐漸改變寬度？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 pm 11:57 PM

如何在CSS中透過懸停在一個分割元素上逐漸改變寬度？

每當我們想要逐漸改變一個元素的樣式，從一種樣式過渡到另一種樣式，無論是透過使用者的互動或是透過停留在網站上的時間來實現。您可以使用動畫來在任何時間段內改變許多樣式。讓我們來看看您需要的動畫屬性。

關鍵影格− 這用於指定一個元素的動畫。它包含將發生在元素樣式上的變化。然後，元素從開始時的樣式移動到最後提到的樣式。
Animation-name − 這是用於引用動畫的，這樣您就不必每次新增動畫時都要指定規則。
動畫持續時間 − 這指定了動畫應用於元素的持續時間。它的初始值為0ms，可以無限期地進行。
Animation-iteration-count − 這確定了動畫將重複播放的次數。
動畫延遲 − 如果您需要將動畫延遲一段時間，可以使用此屬性。
動畫方向 − 這指定了動畫是需要向前方向、向後方向還是在兩個方向上交替進行。
動畫時間函數 − 當您希望動畫在開始、中間和結束時具有不同的時間間隔時，請使用此屬性。

我們也可以使用「animation」縮寫屬性，它由所有這些屬性組成。它適用於所有元素，但不可繼承。需要注意的是，在使用縮寫符號時，值的順序很重要，因為每個值根據其順序以不同的方式解釋。

例子

在CSS中使用動畫的範例如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Animations in CSS</title>
   <style>
      @keyframes example {
         from {
            background-color: maroon;
         }
         to {
            background-color: plum;
         }
      }
      div {
         width: 500px;
         height: 500px;
         margin: 12.25%;
         background-color: maroon;
         animation-name: example;
         animation-iteration-count: infinite;
         animation-duration: 4s;
      }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

登入後複製

現在我們知道了CSS中的動畫是什麼，接下來我們將討論如何透過動畫來使div元素逐漸改變其寬度。

過渡屬性

我們將使用transition屬性來解決這個問題。這個屬性用於為元素添加過渡效果。它是CSS中可用的一種簡寫屬性。

它定義了動畫發生時發生的過渡，元素從一個狀態變成另一個狀態。它適用於所有元素，且不可繼承。

以下屬性構成了縮寫過渡屬性。

Transition-delay − 這個屬性指定了瀏覽器在應用過渡屬性之前需要等待的時間。它的初始值為0，正值會使其等待更長時間，而負值會使過渡更快。
過渡持續時間 - 這設定了過渡效果可見的時間持續時間，在此持續時間之後，動畫結束。此屬性的預設值為0，因此預設動畫是不可見的。
Transition-property − 它設定將會套用過渡效果的元素。它可以有兩個可能的值，none和all。預設情況下，值設定為all，因此所有元素都套用了過渡效果，但none表示沒有任何元素具有該過渡效果。
Transition-timing-function −# 此屬性用於控制動畫開始、中間和結束時的過渡速度。初始值設定為ease，但CSS有許多預先定義的時間函數。

#我們可以在懸停狀態下設定過渡屬性，動畫將在懸停或使用活動偽類時觸發。我們也可以使用JS動態分配類，並使用它們來觸發過渡。

例子

在CSS中使用transition屬性的一個簡單範例如下所示。

<!DOCTYPE html>
<html>
<head>
   <style>
      a {
         text-decoration: none;
         font-size: 14px;
         transition: font-size 4s 1s;
      }
      a:hover {
         font-size: 36px;
      }
   </style>
</head>
<body>
   <a>This text will have its font modified on hover</a>
</body>
</html>

登入後複製

在執行上述程式時，將顯示一段文本，如果你將滑鼠懸停在上面，你可以看到文本的過渡效果。

使用過渡作為解決方案

我們現在將看到一個使用過渡來解決手邊問題的範例。

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: royalblue;
      }
      div {
         width: 150px;
         height: 200px;
         background: linear-gradient(
            0deg,
            rgb(111, 190, 87) 20%,
            rgb(119, 218, 119) 50%,
            rgb(93, 81, 76) 98%
         );
         transition: width 2s;
      }
      .textCenter {
         display: flex;
         align-items: center;
         justify-content: center;
      }
      div:hover {
         width: 500px;
      }
   </style>
</head>
<body>
   <h1 id="Example-of-using-transition-property-to-increase-width-gradually-on-hover">Example of using transition property to increase width gradually on hover.</h1>
   <div class="textCenter">Please hover over here</div>
</body>
</html>

登入後複製

上述程式的輸出是一個div 盒子，其寬度在2秒內逐漸從150px變化到500px。