在鼠标悬停上更改位置的元素上的Css过渡

Question

当用户将鼠标悬停在此框中时，我有一个提升框，我这样做：

＆＃13;

＆＃13;

.box:hover { 
     position: relative; 
     top: -10px;
}

＆＃13;

＆＃13;

＆＃13;

我想知道是否可以使用transition属性进行平滑过渡？

如果没有，我应该如何获得这种平稳的效果？

Answer 1

您可以使用CSS transition属性。在此处阅读更多内容：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

以下是一个例子：

＆＃13;

＆＃13;

.box {
  background: red;
  height: 50px;
  position: relative;
  top: 50px;
  transition: top 1000ms ease-in;
  width: 50px;
}
.box:hover {
  position: relative;
  top: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;