CSS3 过渡：从顶部移动到 30px - 鼠标悬停效果

可以使用以下 CSS 代码实现：

div {
  position: relative;
  top: 0px;
  transition: top 0.5s;
}

div:hover {
  top: 30px;
}

这段代码将一个 'div' 元素的位置设置为相对定位，初始 'top' 值为 0。然后在 'div' 元素的 'transition' 属性中设置 'top' 属性的过渡时间为 0.5 秒。当鼠标悬停在 'div' 元素上时，'top' 属性的值将从 0 过渡到 30，实现了从顶部到 30px 的过渡效果。