CSS Transition：变魔术的艺术

想象一下，你有一个按钮，平时是个害羞的小家伙，但当你把鼠标悬停在上面时，它变得活泼起来，改变颜色、尺寸或其他样式。这就是 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 文件。
• 加入一个按钮元素，比如 点我。
• 使用