📅 最后修改于: 2023-12-03 15:14:20.739000 🧑 作者: Mango
在 CSS 中，我们可以使用不透明度过渡来实现元素在显示和隐藏之间平滑过渡的效果。通过改变元素的不透明度，可以使其逐渐显现或消失，而不是突然出现或消失。
要使用不透明度过渡，可以通过以下 CSS 属性实现：
transition: opacity <duration> <timing-function> <delay>;
opacity：设置元素的不透明度，取值范围为 0 到 1，其中 0 表示完全透明，1 表示完全不透明。duration：指定过渡的持续时间，可以使用单位 s（秒）或 ms（毫秒）。timing-function（可选）：设置过渡的时间曲线，可以使用预定义的值，例如 linear（线性）、ease（默认值）、ease-in（加速）、ease-out（减速）等。delay（可选）：设置延迟开始过渡的时间，同样可以使用单位 s 或 ms。以下是一个示例，展示了如何使用不透明度过渡创建一个平滑的动画效果：
<!DOCTYPE html>
<html>
<head>
<style>
.fade-in {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.fade-in:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="fade-in">鼠标悬停以显示</div>
</body>
</html>
在上面的示例中，鼠标悬停在 <div> 元素上时，透明度由 0 变为 1，过渡时间为 1 秒，并且采用了默认的时间曲线。当鼠标离开时，不透明度会立即恢复为 0，因为我们没有为鼠标离开事件指定过渡效果。
注意：在不透明度为 0 的情况下，元素仍然占据页面空间，只是不可见，因此可能会影响其他元素的布局。
以上就是关于 CSS 不透明度过渡的介绍，希望对你有所帮助！