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

Question

我有一个盒子，当用户将鼠标悬停在这个盒子上时，它会升起，我使用：

​

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

​

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

如果没有，我该如何获得这个平滑的效果呢？

Answer 1

可以使用CSS transition属性。点击此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

下面是一个示例：

​

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

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

​