过渡与悬停效果
本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 24 课，共 43 课。
过渡可以让你在一段时间内平滑地改变属性，而不是立即改变。
selector {
transition: property duration timing-function delay;
}- property: 你想要过渡的 CSS 属性（例如，background-color、width、opacity）。
- duration:过渡完成所需的时间（例如，1s 表示 1 秒）。
- timing-function: 过渡的进行方式（例如 linear、ease、ease-in）。
- delay: 开始过渡前的等待时间（可选）。
例如：
.button {
background-color: green;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: blue;
}将鼠标悬停在按钮上时，它的背景颜色会在 0.3 秒内从绿色变为蓝色。
挑战
简单为 .card 添加 transition 属性，让背景颜色和 box-shadow 在 0.4 秒内平滑变化，并使用 ease 计时函数。
亲手试试
<!DOCTYPE html>
<html>
<head>
<style>
/* Write your CSS here */
.card {
background-color: white;
padding: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="card">
Hover over me!
</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
精通 CSS中的所有课
自己练习： Web 在线编辑器