填充 .3s 的线性过渡

Question

我正在尝试为我的 navbar 项目制作一个很好的过渡效果，在悬停时它们会使用 linear transition-timing-function 在 [=14= 上使用填充平滑地改变位置]秒。

这是我试过的方法：

.navbar-nav > li > a {
    padding-top: 26px;
    padding-bottom: 4px;
}
.navbar-nav > li > a:hover {
    padding-top: 15px;
    padding-bottom: 15px;
    transition: .3 linear; /* I need to figure out what to do in this line */
}

如有任何帮助，我们将不胜感激！ :)

Answer 1

锚 a 将需要 display: inline-block; 并将 transition 移动到锚规则

a {
  display: inline-block;
  background: lightgray;
  padding-top: 26px;
  padding-bottom: 4px;
  transition: padding-top .3s linear, padding-bottom .3s linear;
}
a:hover {
  padding-top: 15px;
  padding-bottom: 15px;
}

<a>This is a link</a>

填充 .3s 的线性过渡

Linear Transition for Padding .3s

css

transition

padding