資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS3 執行多個過渡
對於多個過渡，使用 CSS3 transition 屬性，它是一個速記屬性。它能在單行中設定過渡屬性、持續時間、時序和延遲時間。我們假設我們更改了過渡的寬度和邊框半徑。
transition: width 2s, border-radius 2s;
設定容器 div
首先，設定一個父 div −
<div class="container"> <div></div> </div>
設定過渡
使用 transition 屬性為 width 和 border-radius 屬性設定過渡。設定的持續時間為 2 秒 −
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
懸停時
懸停滑鼠游標時，由於我們在上面設定了兩個過渡，形狀將發生改變 −
.container:hover div {
width: 100px;
border-radius: 50%;
}
以寬度和邊框半徑設定多個過渡
以下是使用 CSS3 執行多個過渡的程式碼 −
範例
以下為範例 −
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 2s, border-radius 2s;
}
.container:hover div {
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div></div>
</div>
<h2>
Hover over the above div to reduce its width and to change it into circle
</h2>
</body>
</html>
以寬度和高度設定多個過渡
讓我們看另一個有關多個過渡的範例。使用 transition 屬性為 width、height 和 background-color 屬性設定過渡。設定的持續時間為 2 秒 −
transition: width 3s, height, 3s, background-color 3s;
範例
以下為範例 −
<!DOCTYPE html>
<html>
<head>
<style>
.container div {
width: 300px;
height: 100px;
border-radius: 1px;
background: rgb(25, 0, 255);
border: 2px solid red;
transition: width 3s, height, 3s, background-color 3s;
}
.container:hover div {
width: 150px;
height: 150px;
background-color: orange;
}
</style>
</head>
<body>
<h1>Multiple transitions example</h1>
<div class="container">
<div></div>
</div>
<h2>
Hover over the above div to reduce its width, height and background color
</h2>
</body>
</html>
更新於： 26-12-2023
2K+ 瀏覽
廣告