5.1 更改顏色
CSS 過渡效果 (transitions) 讓你可以逐漸改變元素的屬性，創造出平滑的視覺效果。現在我們來看看如何使用過渡效果改變顏色、尺寸和位置，並展示實際範例。
使用 CSS 過渡效果改變元素的顏色是最常見的應用之一。這可以包括改變文本顏色、背景或元件邊框顏色。
範例 1: 改變背景顏色
這個範例展示了在游標懸停時改變元素的背景顏色：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改變背景顏色</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: background-color 1s ease;
}
.box:hover {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼說明:
.box: 固定尺寸和背景顏色的元素.box:hover: 鼠標懸停時，背景顏色在1秒內由藍色平滑變為綠色，並採用ease時間函數
範例 2: 改變文字顏色
這個範例展示了在游標懸停時改變元素的文字顏色：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改變文字顏色</title>
<style>
.text {
font-size: 24px;
color: #e74c3c;
transition: color 0.5s linear;
}
.text:hover {
color: #8e44ad;
}
</style>
</head>
<body>
<div class="text">Hover over me!</div>
</body>
</html>
代碼說明:
.text: 初始文字顏色的元素.text:hover: 鼠標懸停時，文字顏色在0.5秒內由紅色平滑變為紫色，並採用線性(time function)
5.2 更改大小
使用 CSS 過渡效果改變元素大小可以包括改變寬度、高度或同時更改兩者。
範例 1: 改變寬度
這個範例展示了在游標懸停時改變元素的寬度：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改變寬度</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f39c12;
transition: width 2s ease-in-out;
}
.box:hover {
width: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼說明:
.box: 初始寬度為100像素的元素-
.box:hover: 鼠標懸停時，寬度在2秒內平滑增加到200像素，並採用ease-in-out時間函數
範例 2: 改變高度
這個範例展示了在游標懸停時改變元素的高度：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改變高度</title>
<style>
.container {
height: 200px;
}
.box {
width: 100px;
height: 100px;
background-color: #1abc9c;
transition: height 1.5s ease;
}
.box:hover {
height: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
代碼說明:
.box: 初始高度為100像素的元素.box:hover: 鼠標懸停時，高度在1.5秒內平滑增加到200像素，並採用ease時間函數
5.3 更改位置
使用 CSS 過渡效果改變元素的位置可以包括使用 top, right, bottom, left 或變形 translate 移動元素。
範例 1: 使用left移動
這個範例展示了在游標懸停時使用 left 屬性將元素向右移動：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移動元素</title>
<style>
.box {
position: relative;
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: left 2s;
left: 0;
}
.box:hover {
left: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代碼說明:
.box: 初始位置left: 0的元素.box:hover: 鼠標懸停時，元素在2秒內平滑移動到右邊100像素
範例 2: 使用transform: translate移動
這個範例展示了在游標懸停時使用 translate 變形將元素移動到右下角：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用transform: translate移動</title>
<style>
.container {
height: 150px;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 1s;
transform: translate(0, 0);
}
.box:hover {
transform: translate(100px, 50px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
代碼說明:
.box: 初始變形translate(0, 0)的元素.box:hover: 鼠標懸停時，元素在1秒內平滑移動100像素到右邊和50像素到下邊
GO TO FULL VERSION