資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究CSS 中使用多個屬性的過渡簡寫？
我們可以使用 CSS 將過渡新增到 HTML 元素。在開始教程之前，讓我們瞭解一下什麼是過渡。基本上，過渡是一個元素從一個狀態變化到另一個狀態。例如，當用戶將滑鼠懸停在元素上時，我們更改元素的尺寸。
在 CSS 中，我們可以透過兩種方式向元素新增過渡。第一種是將“transition-property”、“transition-duration”、“transition-timing-function”和“transition-delay”這四個屬性一起使用。第二種是隻使用“transition”CSS 屬性。
CSS 的“transition”屬性是下面這些 CSS 屬性的簡寫。
Transition-property − 它指定需要應用過渡效果的 CSS 屬性。如果需要對所有屬性應用過渡，則可以使用“all”作為值。
Transition-duration − 它是過渡效果的總時間，以秒為單位。
Transition-timing-function − 它決定了過渡如何進行。過渡時序函式的示例包括“liner”、“ease-in”、“ease-out”、“ease-in-out”等。
Transition-delay − 它是過渡效果開始後的時間間隔。
語法
使用者可以按照以下語法使用具有多個 CSS 屬性的過渡簡寫。
element {
transition: Property duration timing-function delay;
}
在上述語法中，第一個值是過渡屬性，第二個值是過渡持續時間，第三個值是時序函式，最後一個是過渡延遲。
示例 1
在下面的示例中，我們有一個 200 x 200 尺寸的 div 元素，並且我們為 div 元素的高度添加了過渡效果，持續時間為 2 秒。此處，過渡延遲為 0.5 秒，時序函式為“ease-in-out”。
使用者可以將滑鼠懸停在 div 元素上以觀察過渡效果。我們可以觀察到 div 元素的高度平滑增加，而不是立即增加。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 500px;
height: 200px;
background-color: red;
color: white;
font-size: 25px;
transition: height 2s ease-in-out 0.5s;
}
.element:hover {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
<div class = "element">
This div contains the texts.
<p> Hover over this div and wait to see the changes </p>
</div>
</body>
</html>
示例 2
在下面的示例中，div 元素的初始 margin-left 為 2px。當用戶將滑鼠懸停在 div 元素上時，我們將 margin-left 增加到 100px。我們在 div 元素的 margin-left CSS 屬性上添加了過渡效果，持續時間為 2 秒，延遲 0.5 秒。
在輸出中，將滑鼠懸停在 div 元素上，它將在 2 秒內向右移動 100px。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s ease-in-out 0.5s;
}
.element:hover {
margin-left: 100px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the below div and wait to see the changes. </p>
<div class = "element">
This div contains the texts.
</div>
</body>
</html>
示例 3
在下面的示例中，我們為多個 CSS 屬性添加了過渡效果。在這裡，我們為“margin-left”、“height”、“width”、“background-color”、“color”和“font-size”CSS 屬性添加了 2 秒的過渡效果。
在輸出中，使用者可以觀察到它對所有 CSS 屬性都進行了平滑過渡。但是，我們可以使用“all”作為“transition-property”的值，以對所有屬性新增過渡。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
}
.element:hover {
margin-left: 100px;
height: 400px;
width: 400px;
background-color: aqua;
color: black;
font-size: 40px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the bellow div to see the achennges</p>
<div class = "element">
Square div element.
</div>
</body>
</html>
使用者學習瞭如何使用“transition”CSS 屬性，它是與過渡相關的多個 CSS 屬性的簡寫。在這裡，我們學習瞭如何在以上三個示例中使用“transition”CSS 屬性。在最後一個示例中，我們為多個 CSS 屬性添加了過渡效果。
585 次瀏覽
