資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用CSS使懸停在div元素上時寬度逐漸變化？
無論何時我們想要逐漸改變元素的樣式，從一種樣式到另一種樣式，無論是使用者的互動還是在網站上的停留時間，都可以使用動畫來改變各種樣式，持續任意時間長度。讓我們來看看動畫所需的屬性。
關鍵幀 - 用於為元素指定動畫。它包含將發生在元素樣式上的更改。然後，元素從開始時的樣式移動到最後提到的樣式。
animation-name - 用於引用動畫，這樣您就不必每次需要新增動畫時都指定規則。
animation-duration - 指定動畫將應用於元素的持續時間。它的初始值為0ms，可以無限期地持續。
animation-iteration-count - 確定動畫將重複的次數。
animation-delay - 如果需要動畫延遲一段時間，則使用此屬性。
animation-direction - 指定動畫是否需要向前、向後或交替兩個方向。
animation-timing-function - 當需要動畫在開始、中間和結束時具有不同的時間安排時使用此屬性。
我們還可以使用簡寫屬性“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屬性
我們將使用transition屬性來解決這個問題。此屬性用於向元素新增過渡效果。它是CSS中可用的簡寫屬性之一。
它定義了動畫發生時發生的過渡，以及元素從一種狀態變為另一種狀態。它應用於所有元素，並且不可繼承。
以下屬性構成了transition簡寫屬性。
transition-delay - 指定瀏覽器需要等待的時間，之後應用transition屬性。其初始值為0，正值使其等待更長時間，而負值使過渡更快。
transition-duration - 設定transition效果可見的持續時間，此持續時間後動畫結束。此屬性的預設值為0，因此預設情況下動畫不可見。
transition-property - 設定將應用transition效果的元素。它可以有兩個可能的值：none和all。預設情況下，值為all，因此所有元素都應用了transition效果，但none則表示沒有元素應用該過渡。
transition-timing-function − 當需要控制動畫開始、中間和結束時的過渡速度時使用此屬性。初始值設定為ease，但CSS有很多預定義的時間函式。
我們可以在懸停狀態下設定transition屬性，動畫將在懸停時觸發，或者使用active偽類。我們還可以使用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>
執行上述程式後，將顯示文字，如果懸停在其上，則可以看到文字的過渡。
使用Transition作為解決方案
我們現在將看到一個使用transition來解決問題的示例。
<!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>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。
結論
總而言之，使用CSS懸停選擇器來逐漸更改div元素的寬度是新增細微動畫效果的有效方法，無需任何額外的程式碼。在建立網頁中的互動式元素（如按鈕和選單）時，它尤其有用。只需幾行程式碼，您就可以建立動態效果，幫助您的頁面脫穎而出。
705 次瀏覽
