html - CSS Transition - 如何使文本从顶部出现？

Question

我想在 html 中创建一个带有一些 CSS 转换的链接。 我想更改背景颜色和文本颜色，这是我实际工作的代码:

.tdNavBar {
    background-color: #912b3d;
    color: white;
    text-align: center;
    width: 150px;
    height: 28px;
    cursor: pointer;

    -webkit-transition: color .4s, background-color .4s;
    -moz-transition: color .4s,background-color .4s;
    transition: color .4s, background-color .4s;
}

.tdNavBar:hover {
    background-color: white;
    color: #912b3d;
    text-align: center;
    width: 150px;
    height: 28px;
    cursor: pointer;

    -webkit-transition: color .4s, background-color .4s;
    -moz-transition: color .4s,background-color .4s;
    transition: color .4s, background-color .4s;
}

但我还想做一件事:我想要一个动画，使文本在悬停时从顶部出现并具有新颜色并替换旧文本，但我不知道如何制作它。

JSFIDDLE:Link

有人可以帮助我吗？

Answer 1

你可以为此使用伪效果:

此编辑后的代码段目前仅适用于设置的文本。

.tdNavBar {
  background-color: #912b3d;
  color: white;
  text-align: center;
  width: 150px;
  height: 28px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-transition: color .4s, background-color .4s;
  -moz-transition: color .4s, background-color .4s;
  transition: color .4s, background-color .4s;
}



.tdNavBar:before {
  content: "I'm Hovered";
  position: absolute;
  height: 0;
  width: 100%;
  font-size:0;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 2;
  transition: all .4s;
}
.tdNavBar:hover:before {
  height: 100%;
  font-size:inherit;
  color:black;
}
.tdNavBar:hover {
  color: transparent;  
}

<button class="tdNavBar">Hover Me</button>
<button class="tdNavBar">Hover Me as well</button>

---

如果你想“改变”文本，你可以这样做:

.tdNavBar {
  background-color: #912b3d;
  color: white;
  text-align: center;
  width: 150px;
  height: 28px;
  cursor: pointer;
  -webkit-transition: color .4s, background-color .4s;
  -moz-transition: color .4s, background-color .4s;
  transition: color .4s, background-color .4s;
  position: relative;
  overflow: hidden;
  displaY: inline-block;
}
.part1,
.part2 {
  position: absolute;
  top:0;
  left:0;
  transition: all .3s;
  text-align: center;  
  color: black;
  width: 100%;
  height: 100%;
}
.part2 {
  top: -100%;
}
.tdNavBar:hover .part2 {
  top: 0;  
  background-color: white;
}
.tdNavBar:hover .part1 {
  
  top:200%;
}

<div class="tdNavBar">
  <div class="part1">part 1</div>
  <div class="part2">hovered</div>
</div>

<div class="tdNavBar">
  <div class="part1">another link</div>
  <div class="part2">it hovers too?</div>
</div>