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秒内从红色变为紫色
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