4 CSS的 变换、过渡与动画-4.2 过渡（Transitions）

时间：2024-06-01 10:59:34

过渡允许元素属性的变化在一段时间内平滑进行，提供了流畅的视觉效果。

4.2.1 定义过渡

transition 属性用于定义元素属性变化时的过渡效果。

/* 定义所有属性的过渡效果，持续时间为0.3秒，使用ease缓动效果 */
.element {
    transition: all 0.3s ease;
}

4.2.2 指定过渡属性

可以指定特定属性的过渡效果。

/* 定义背景颜色和宽度的过渡效果 */
.element {
    transition: background-color 0.3s ease, width 0.3s ease;
}

4.2.3 过渡效果示例

通过过渡效果改变背景颜色。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过渡效果示例</title>
<style>
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transition: background-color 0.5s ease;
}

.box:hover {
    background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

相关文章