掌握CSS过渡效果：实现从上往下的动态过渡

发表时间: 2024-07-18 17:32

要在CSS中实现一个从上往下的过渡效果，你可以使用transition属性，并结合transform属性。以下是一个简单的例子，演示了如何实现一个元素在鼠标悬停时从上向下移动的过渡效果：

<!DOCTYPE html>

<head>

<style>

.box {

width: 100px;

height: 100px;

background-color: blue;

transition: transform 0.5s ease-in-out;

}

.box:hover {

transform: translateY(50px);

}

</style>

</head>

<body>

</body>

</html>

在这个例子中，.box类定义了一个方框，并指定了一个过渡效果，使得当transform属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。