css3过渡从上向下距离顶部的高度

使用CSS3过渡实现从上向下距离顶部的高度变化，可以通过设置元素的top属性值来实现。具体步骤如下：

定义元素的初始状态，即设置元素的top属性值为0，以确保元素初始状态在顶部位置。
定义元素的目标状态，即设置元素的top属性值为所需的高度值，如100px，以实现从顶部向下移动的效果。
使用CSS3过渡属性transition，设置元素的过渡时间和过渡方式，如下所示：

transition: top 0.5s ease-in-out;

触发状态变化，可以通过JavaScript或CSS伪类:hover等方式触发元素的状态变化，使其从初始状态向目标状态过渡。

完整示例代码如下：

HTML代码：

<div class="box"></div>

CSS代码：

.box {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  background-color: red;
  transition: top 0.5s ease-in-out;
}

.box:hover {
  top: 100px;
}

以上代码实现了一个红色正方形块，初始状态在顶部位置，鼠标悬停时从顶部向下移动100px的效果。其中，box类设置元素的基本样式，包括宽高、背景色等；hover伪类设置元素的目标状态，即top属性值为100px，过渡效果使用了ease-in-out缓动函数，过渡时间为0.5s