資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 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 秒內使用 ease-in-out 時間函式進行過渡。
建立多個過渡
要在元素上建立多個過渡，我們需要向 CSS 程式碼新增其他過渡。例如，要建立一個同時過渡寬度和 background-color 屬性的按鈕，我們可以使用以下程式碼：
button {
transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
上述程式碼指定按鈕的寬度和 background-color 屬性都將在 0.5 秒內使用 ease-in-out 時間函式進行過渡。
以下是一些使用 CSS 在元素上建立多個過渡的完整程式碼示例：
示例 1
在此示例中，我們將建立一個同時過渡寬度和 background-color 屬性的按鈕。但是，我們將為每個過渡使用不同的持續時間來建立交錯效果。
<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>Multiple Transitions with Different Durations</h3>
<button>Hover Me</button>
</body>
</html>
在上面的示例中，我們為按鈕設定了100px 的寬度和綠色的background-color。然後，我們將 transition 屬性設定為同時過渡寬度和background-color 屬性。但是，我們為寬度過渡使用 0.5s 的持續時間，為 background-color 過渡使用 1s 的持續時間。這會建立一個交錯效果，其中按鈕的寬度過渡速度快於 background-color。當滑鼠懸停在按鈕上時，寬度將擴充套件到150px，而background-color 將變為紅色。
示例 2
在此示例中，我們將建立一個同時過渡 background-color 和 border-radius 屬性的方框。但是，我們將為 border-radius 過渡使用延遲。
<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>Multiple Transitions with Delays</h3>
<div> Hover over the below circle to see multiple transitions</div>
<div class="box"></div>
</body>
</html>
在上面的示例中，我們為方框設定了 200px 的寬度和高度以及紅色的 background-color。然後，我們將 transition 屬性設定為同時過渡 background-color 和 border-radius 屬性。但是，我們為 border-radius 過渡使用了 0.5s 的延遲。這意味著 background-color 將立即過渡，而 border-radius 將等待 0.5s 後再過渡。當滑鼠懸停在方框上時，background-color 將變為藍色，border-radius 將過渡到 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>Multiple Transitions with Different Timing Functions</h3>
<button>Hover Me</button>
</body>
</html>
在上面的示例中，我們為按鈕設定了 120px 的寬度和藍色的 background-color，然後將 transition 屬性設定為同時過渡寬度和顏色屬性。但是，我們為每個過渡使用了不同的時間函式。寬度過渡使用自定義 cubic-bezier 函式。當滑鼠懸停在按鈕上時，寬度將擴充套件到 180px，文字顏色將從紅色變為白色。
結論
CSS 過渡是用於在網頁上建立流暢且視覺上吸引人的效果的強大工具。透過使用 transition 屬性，我們可以指定正在過渡的持續時間、時間函式和屬性。我們還可以透過在 transition 屬性中指定多個屬性來在元素上建立多個過渡。
1000+ 次瀏覽
