想象一下，你有一个按钮，平时是个害羞的小家伙，但当你把鼠标悬停在上面时，它变得活泼起来，改变颜色、尺寸或其他样式。这就是 transition 的魔力！
基础结构：魔术的四大支柱
- 属性 (Property): 你想施魔法的属性，比如 color、opacity。
- 时长 (Duration): 魔法持续的时间，比如 2s (2秒)。
- 时序函数 (Timing Function): 魔法发生的节奏，比如 ease (慢快慢)。
- 延迟 (Delay): 魔法施展前的等待时间，比如 1s。
代码示范：魔术师上场
.magic-button {
background-color: blue;
transition: background-color 2s ease 1s;
}
.magic-button:hover {
background-color: red;
}
在这里，我们创建了一个按钮 .magic-button。当鼠标悬停时，它的背景颜色在 1 秒后开始变化，用时 2 秒从蓝色变为红色，变化过程是先慢后快再慢的节奏。
多重魔法：一次施展多个咒语
.magic-button {
background-color: blue;
opacity: 0.5;
transition: background-color 2s, opacity 2s;
}
.magic-button:hover {
background-color: red;
opacity: 1;
}
这里，我们不仅改变颜色，还改变透明度。两种魔法同时施展，同样持续 2 秒。
实践演练：让魔法动起来
- 创建一个 HTML 文件。
- 加入一个按钮元素，比如 点我。
- 使用
<style>标签或外部 CSS 文件来添加上述 CSS 代码。 - 打开 HTML 文件，见证魔法的时刻！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition Magic</title>
<style>
.magic-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 2s ease 1s, transform 1s ease-in-out;
}
.magic-button:hover {
background-color: red;
transform: scale(1.1);
}
</style>
</head>
<body>
<button class="magic-button">点我</button>
</body>
</html>
在这个例子中，我们有一个 .magic-button 类的按钮。当鼠标悬停在按钮上时，背景颜色将在 1 秒后开始从蓝色变为红色，并且按钮会轻微放大（transform: scale(1.1)），这个变化会在 1 秒内完成。
高级技巧：掌控魔法的奥秘
现在，让我们增加一些高级技巧，比如使用贝塞尔曲线自定义过渡效果。
更新 CSS (在<style>标签内)
.magic-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 2s cubic-bezier(0.42, 0, 0.58, 1), transform 1s ease-in-out;
}
.magic-button:hover {
background-color: green;
transform: rotate(10deg);
}
在这个更新的例子中，我们将过渡效果的时序函数改为了一个贝塞尔曲线（cubic-bezier(0.42, 0, 0.58, 1)），这提供了一种不同于标准的 ease 或 linear 的过渡效果。同时，我们还添加了一个旋转效果（transform: rotate(10deg)），当鼠标悬停时，按钮不仅改变颜色，还会轻微旋转。
总结：舞台上的魔术师
CSS 的 transition 就像舞台上的魔术师，可以让元素在不同状态间平滑转换，为用户带来愉悦的视觉体验。记住它的四大支柱，熟练掌握多重魔法的组合，你就可以在网页设计的舞台上自如施展了！
现在，你已经准备好让你的网页元素跳起舞来了！记得，实践是掌握魔法的关键，多尝试，多创新！
![[PHP]严格类型](https://img-blog.csdnimg.cn/direct/aaf86b2bd14448d7953a6b4afb731358.png)
![[数据结构]-哈希](https://img-blog.csdnimg.cn/f55a07090b3541518429c3017449bf1b.png)
